图片与文字对齐方式
2022-8-24 乱云飞 标签: 图片对齐方式 图片上对齐 图片文本对齐 居中对齐
本文链接:http://80c.cc/ez/571.html
- <!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>
发表评论: