当前第2页 返回上一页
举例2：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical-align属性</title>
<style type="text/css">
div
{
width:100px;
height:80px;
border:1px solid gray;
}
.div_img1{vertical-align:top;}
.div_img2{vertical-align:middle;}
.div_img3{vertical-align:bottom;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<div class="div_img1">
<img src="http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
</div>
<div class="div_img2">
<img src="http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
</div>
<div class="div_img3">
<img src="http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
</div>
</body>
</html>
|
效果如下：
咦？！怎么回事？怎么图片没有按照预期的进行垂直对齐？啊，其实大家误解了vertical-align属性了，vertical-align属性定义是：vertical-align属性定义行内元素相对于该元素的垂直对齐方式。【推荐阅读：块级元素和行内块元素是什么？】
以上就是对css图片如何实现垂直？css图片垂直对齐方法的全部介绍，如果您想了解更多有关CSS教程，请关注PHP中文网。
以上就是css图片如何实现垂直？css图片垂直对齐方法的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css图片如何实现垂直？css图片垂直对齐方法
更多相关阅读请进入《css图片》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css图片如何实现垂直？css图片垂直对齐方法
