您當(dāng)前位置：圖趣網(wǎng)（Tuquu） >> 網(wǎng)頁設(shè)計教程 >> 移動前端 >> 瀏覽設(shè)計教程

關(guān)于div中img,span垂直居中的題目

2016/12/29 13:56:34來源：互聯(lián)網(wǎng)

如下所示：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <html>  
  2. <head>  
  3. <style>  
  4. #test *{vertical-align:middle;}   
  5. </style>  
  6. <body>  
  7. <div  
  8. id="test">  
  9. <img  
  10. src="http://127.0.0.1:7001/wsc/images/message.png"/>  
  11. <span>sdfhsdhfdksfjhtes:</span>  
  12. </div>  
  13. </body>  
  14. </html>  

請細(xì)致：#test *{vertical-align:middle;}s

#test *透露表現(xiàn)了div里面所有元素,當(dāng)然包含了span,input,img這些內(nèi)聯(lián)元素了。

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

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

以上就是小編為大家?guī)淼年P(guān)于div中img,span垂直居中的題目的悉數(shù)內(nèi)容了，盼望對大家有所幫助，多多支持圖趣網(wǎng)~

[教程作者：佚名]
關(guān)鍵詞：關(guān)于 垂直 居中 中的 問題
免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請注明出處，素材資料僅供個人學(xué)習(xí)與參考，請勿用于商業(yè)用途！
本文地址：http://likemindfilms.com/tutorial/wd3346.html
淺談HTML空鏈接的作用
h5輸入框提醒語 + 正常文本框提醒語的實現(xiàn)方法
圖趣網(wǎng)微信
建議反饋
×