本文摘自PHP中文网,作者云罗郡主,侵删。
本篇文章给大家带来的内容是关于css图片如何实现垂直?css图片垂直对齐方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。vertical-align属性
我们使用text-align属性来定义图片水平对齐方式。
大家就开始有疑问了,图片水平对齐我们实现了,那如果想对图片进行垂直对齐呢?
在CSS中,我们可以使用vertical-align属性来定义图片的垂直对齐方式。
语法:vertical-align:属性值;
vertical-align还有sub、super等一些属性值,对于这些我们不需要去理会,因为在实际开发中压根儿用不上。我们只需要使用以上这4个属性值就完全足够了。
举例1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html>
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< title >vertical-align属性</ title >
< style type = "text/css" >
img{width:80px;height:80px;}
#img_1{vertical-align:top;}
#img_2{vertical-align:middle;}
#img_3{vertical-align:bottom;}
#img_4{vertical-align:baseline;}
</ style >
</ head >
< body >
php中文网< img id = "img_1" src = "http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt = "" />php中文网(< strong >top</ strong >)
< hr />
php中文网< img id = "img_2" src = "http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt = "" />php中文网(< strong >middle</ strong >)
< hr />
php中文网< img id = "img_3" src = "http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt = "" />php中文网(< strong >bottom</ strong >)
< hr />
php中文网< img id = "img_4" src = "http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt = "" />php中文网(< strong >baseline</ strong >)
</ body >
</ html >
|
效果如下:
大家仔细观察一下,“vertical-align:baseline”和“vertical-align:bottom”是有区别的。
阅读剩余部分
相关阅读 >>
css图片如何实现垂直?css图片垂直对齐方法
更多相关阅读请进入《css图片》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css图片如何实现垂直?css图片垂直对齐方法