<!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>
图片与文字对齐方式
最新推荐文章于 2022-06-18 09:59:06 发布