-1

// My HTML CODE HERE 
<div id="main"> 
    <div id="wrap"> 
     <div class="header"> 
      <span class="img_frame"> 
       <img src="http://phone.pe.hu/main_logo_white.png"> 
      </span> 
     </div> 
    </div> 
</div> 

// My css CODE HERE 
#wrap .header { 
    position:relative; 
    background-color: rgba(35, 81, 112, 0.9); 
    opacity: 0.8; 
    width:598px; 
    height:72px; 
    float:left; 
    text-align: center; 
    display: block;  
} 

#wrap .header .img_frame { 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 

#wrap .header .img_frame img { 
    display: inline-block; 
    width: 182px; 
    vertical-align: middle; 
}

我試圖將img標記對齊定位在內嵌塊顯示中的跨度框中的中間，但它不起作用。（這種方法指的是這樣的回答：How to vertically align an image inside div）css img vertical-align to middle does not work。怎麼了？

結果可以在這裏看到： https://jsfiddle.net/MaggiePhalk/Lmn8jaLe/2/

應該怎麼糾正？ PLZ。

來源

2015-07-09 Maggie Phillips

你沒有關注[如何垂直對齊內格的圖像（http://stackoverflow.com/q/7273338/1529630）在所有 – Oriol

哎呀，這是我的錯。解決方法是將img標籤從span標籤中拉出（在之後），但我仍然不明白它如何以這種方式工作。 –

您可以使用CSS顯示屬性table和table-cell垂直對齊，並使用margin: 0 auto居中圖像。

CSS

#wrap .header { 
    position:relative; 
    background-color: rgba(35, 81, 112, 0.9); 
    opacity: 0.8; 
    width:598px; 
    height:72px; 
    float:left; 
    text-align: center; 
    display: table; 
} 
#wrap .header .img_frame { 
    display: table-cell; 
    vertical-align: middle; 
    height: 100%; 
} 
#wrap .header .img_frame img { 
    display: table-cell; 
    width: 182px; 
    vertical-align: middle; 
    margin:0 auto; 
}

Working JSFiddle

更多信息：CSS Vertical Aligning

來源

2015-07-10 00:06:29 bnahin

哇，Thx爲您的想法。我剛剛糾正了我的問題代碼中的原因。這只是拉出img標籤。 OOPS。呵呵。無論如何，我試過你的解決方案，並檢查它也很好，然後我需要審查關於表格單元格屬性。謝謝。 –

該代碼使用中的問題

JSFiddle

引用的方法

下面是代碼：

<div id="main">  
    <div id="wrap"> 
     <div class="header"> 
      <span class="img_frame"></span> 
       <img src="http://phone.pe.hu/main_logo_white.png" height="30px"/> 
     </div> 
    </div> 
</div> 

#wrap .header { 
    position:relative; 
    background:transparent url('backgrounds/header7_814_opacity40.png') no-repeat; 
    background-color: rgba(35, 81, 112, 0.9); 
    opacity: 0.8; 
    width:598px; 
    height:72px; 
    text-align: center; 
    display: block;  
} 

.img_frame { 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
} 
img{ 
    vertical-align: middle; 
    max-height: 72px; 
    max-width: 598; 
}

來源

2015-07-10 00:13:01 geeves

是的，就像你的回答，原因是img標籤的位置。大聲笑。謝謝。 –

css img vertical-align to middle does not work。怎麼了？

回答

CSS

相關問題