图片与文字对齐方式
2022-8-24 乱云飞 评论(0) 浏览(162) 标签: 图片对齐方式 图片上对齐 图片文本对齐 居中对齐
<!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>
实时监控
电脑维修
