HTML中图片和文字的对齐方式

最新推荐文章于 2024-05-30 21:20:12 发布

墨染枫林

最新推荐文章于 2024-05-30 21:20:12 发布

阅读量4.3w

点赞数 18

分类专栏： CSS+HTML 前端

本文链接：https://blog.csdn.net/weixin_38055381/article/details/82983344

版权

前端同时被 2 个专栏收录

42 篇文章 3 订阅

订阅专栏

CSS+HTML

24 篇文章 2 订阅

订阅专栏

文字和图片的对齐方式会影响到页面的整体效果，之前没有仔细研究过。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片与文字的相对位置</title>
    <style>
        img{
            width: 160px;
            height: 126px;
            margin: 10px;
        }
    </style>
</head>
<body>
<h3>图片与文字的相对位置</h3>
<!--    absmiddle       图片中间与同一行最大元素中间对齐；
        absbottom       图片下边缘与同一行最大元素下边缘对齐；
        baseline        图片下边缘与第一行文本下边缘对齐；
        bottom          图像下边缘与第一行文本下边缘对齐；
        left            图像沿网页左边缘对齐，文字在图像向右边换行；
        middle          图像中间与第一行文本的下边缘对齐；
        notset          未设定对齐方式；
        right           图像沿网页的右边缘对齐，文字在图像左边换行；
        texttop         图片上边缘与同一行最高文本上边缘对齐；
        top             图片上边缘与同一行最高元素上边缘对齐。-->
    <!--图片中间与同一行最大元素中间对齐-->
    <img src="../image/ab1.jpg" align="absmiddle"/>
    <!--图片下边缘与同一行最大元素下边缘对齐-->
    <img src="../image/ab2.jpg" align="absbottom"/>
    <!--图片下边缘与第一行文本下边缘对齐-->
    <img src="../image/ab3.jpg" align="baseline"/>
    <!--图像下边缘与第一行文本下边缘对齐-->
    <img src="../image/ab4.jpg" align="bottom"/>
    <!--图像沿网页左边缘对齐，文字在图像向右边换行-->
    <img src="../image/ab5.jpg" align="left"/>
    <!--图像中间与第一行文本的下边缘对齐-->
    <img src="../image/ab6.jpg" align="middle"/>
    <!--未设定对齐方式-->
    <img src="../image/ab7.jpg" align="notset"/>
    <!--图像沿网页的右边缘对齐，文字在图像左边换行-->
    <img src="../image/ab8.jpg" align="right"/>
    <!--图片上边缘与同一行最高文本上边缘对齐-->
    <img src="../image/ab9.jpg" align="texttop"/>
    <!--图片上边缘与同一行最高元素上边缘对齐-->
    <img src="../image/ab10.jpg" align="top"/>
</body>
</html>

页面效果如下图所示：

墨染枫林

关注

18
点赞
踩
100

收藏

觉得还不错? 一键收藏
1
评论
HTML中图片和文字的对齐方式

文字和图片的对齐方式会影响到页面的整体效果，之前没有仔细研究过。&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片与文字的相对位置&lt;/title&gt; &lt;style&a
复制链接

扫一扫

专栏目录