明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

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

發(fā)表時間：2024-05-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這次給大家?guī)碓赿iv中img,span怎樣可以做出垂直居中，在div中img,span做出垂直居中的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。<html> <head> <style> #test *{vertical-align:middle;}...
這次給大家?guī)碓赿iv中img,span怎樣可以做出垂直居中，在div中img,span做出垂直居中的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

<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這些內(nèi)聯(lián)元素了。

vertical-align
初始值：　baseline（缺省值）
可否繼承：否
適用于：　內(nèi)聯(lián)元素
說明：vertical-align:baseline使元素的基線同父元素的基線對齊．
警告：vertical-align不能影響表格單元中的內(nèi)容的對齊，對于塊元素中的內(nèi)容也一樣．

請注意：vertical-align只影響內(nèi)聯(lián)元素,比如span,img,em,input,a等這些元素，而對div,h3,p等這些塊元素是無效的。

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

怎樣用h5的sse服務(wù)器發(fā)送EventSource事件

H5的本地存儲和本地數(shù)據(jù)庫詳細介紹

用H5和C3實現(xiàn)簡單的時鐘效果

以上就是在div中img,span怎樣可以做出垂直居中的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。