圖像不是垂直對齊：中間

我有1 div div2換行h2和圖像用img封裝在div div中。 h2是float：left和img float：right。圖像不是垂直對齊：中間

img div裏面有圖像。我想要的是

如果圖像的高度和寬度100px比不垂直對齊：中間。請幫助。

與垂直對齊測試：中間

CSS

.ver-mainbox{float:left; width:898px; border:1px solid #c3c3c3; padding:0px; height:122px; margin-bottom:15px; background-color:#ffffff;} 
.ver-mainbox h2{font-size:18px;color:#000; padding-left:10px; margin:0px; vertical-align:middle; width:500px; float:left; padding-top:42px;} 
.ver-mainbox .img{float:right; padding:0px; width:186px; height:122px;}

HTML

<div class="mainbox-area"> 
     <!-- Box start v1 --> 
     <div class="ver-mainbox">             
      <h2>Immunizations</h2> 
      <div class="img"><img src="../../Content/images/v1.gif" alt="" title="" /></div> 
     </div>             
     <!-- Box start v1 -->                
</div>

來源

2011-06-21 Pirzada

在CSS中垂直對齊很少做你想做的事情。除非容器設置了'line-height'或'display：table-cell'，垂直對齊僅適用於當前文本行，而不適用於容器內的位置。很好的例子：http://css-tricks.com/2597-what-is-vertical-align/ –

@Marc B謝謝你的回覆。你能修好我的代碼嗎？ – Pirzada

vertical-align只適用於表格單元格。您需要重新考慮如何執行此操作或使用display:table-*屬性。

<div style="display:table">            
     <h2 style="display:table-cell;vertical-align:middle">Immunizations</h2> 
     <div style="display:table-cell;vertical-align:middle"> 
      <img src="../../Content/images/v1.gif" alt="" title="" /> 
     </div> 
    </div>

來源

2011-06-21 03:56:18 SpliFF

搜索引擎優化的觀點很好嗎？ – Pirzada

除非你隱藏東西，否則CSS在很大程度上與SEO無關。 – SpliFF

@SpliFF，這是錯誤的。根據[CSS2規範]（http://www.w3.org/TR/CSS2/visudet.html#line-height）：*適用於：內聯級別和「表格單元格」元素* – feklee

圖像不是垂直對齊：中間

回答

相關問題