在div中img,span如何可以做出垂直居中
發(fā)表時(shí)間：2023-09-21 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這次給大家?guī)?lái)在div中img,span怎樣可以做出垂直居中，在div中img,span做出垂直居中的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。<html> <head> <style> #test *{vertical-align:middle;}...
這次給大家?guī)?lái)在div中img,span怎樣可以做出垂直居中，在div中img,span做出垂直居中的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。
<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>請(qǐng)注意：#test *{vertical-align:middle;}s
#test *表示了div里面所有元素,當(dāng)然包含了span,input,img這些內(nèi)聯(lián)元素了。
vertical-align
初始值： baseline（缺省值）
可否繼承：否
適用于： 內(nèi)聯(lián)元素
說(shuō)明：vertical-align:baseline使元素的基線(xiàn)同父元素的基線(xiàn)對(duì)齊．
警告：vertical-align不能影響表格單元中的內(nèi)容的對(duì)齊，對(duì)于塊元素中的內(nèi)容也一樣．
請(qǐng)注意：vertical-align只影響內(nèi)聯(lián)元素,比如span,img,em,input,a等這些元素，而對(duì)div,h3,p等這些塊元素是無(wú)效的。
相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
相關(guān)閱讀：
怎樣用h5的sse服務(wù)器發(fā)送EventSource事件
H5的本地存儲(chǔ)和本地?cái)?shù)據(jù)庫(kù)詳細(xì)介紹
用H5和C3實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘效果
以上就是在div中img,span怎樣可以做出垂直居中的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
