首頁  >  文章  >  web前端  >  在div中img,span怎麼可以做出垂直居中

在div中img,span怎麼可以做出垂直居中

php中世界最好的语言
php中世界最好的语言原創
2018-01-20 09:59:137436瀏覽

這次帶給大家在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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn