在div中img,span如何可以做出垂直居中
發表時間:2023-09-21 來源:明輝站整理相關軟件相關文章人氣:
[摘要]這次給大家帶來在div中img,span怎樣可以做出垂直居中,在div中img,span做出垂直居中的注意事項有哪些,下面就是實戰案例,一起來看一下。<html> <head> <style> #test *{vertical-align:middle;}...
這次給大家帶來在div中img,span怎樣可以做出垂直居中,在div中img,span做出垂直居中的注意事項有哪些,下面就是實戰案例,一起來看一下。
<html>
<head>
<style>
#test *{vertical-align:middle;}
</style>
<body>
<div
id="test">
<img
src="http://127.0.0.1:7001/wsc/images/message.png"/>
<span>sdfhsdhfdksfjhtes:</span>
</div>
</body>
</html>
請注意:#test *{vertical-align:middle;}s
#test *表示了div里面所有元素,當然包含了span,input,img這些內聯元素了。
vertical-align
初始值: baseline(缺省值)
可否繼承:否
適用于: 內聯元素
說明:vertical-align:baseline使元素的基線同父元素的基線對齊.
警告:vertical-align不能影響表格單元中的內容的對齊,對于塊元素中的內容也一樣.
請注意:vertical-align只影響內聯元素,比如span,img,em,input,a等這些元素,而對div,h3,p等這些塊元素是無效的。
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
怎樣用h5的sse服務器發送EventSource事件
H5的本地存儲和本地數據庫詳細介紹
用H5和C3實現簡單的時鐘效果
以上就是在div中img,span怎樣可以做出垂直居中的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。