<!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>
该博客主要介绍了图片与文字相对位置的设置。通过 HTML 代码展示了多种对齐方式，如图片中间与最大元素中间对齐、图片下边缘与文本下边缘对齐等，每种方式都有对应的示例图片及代码实现。
扫一扫
6680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
