顯示：內聯塊，跨度未正確對齊

Question

我已經嘗試過vertical-align屬性，但是未能在中間對齊span ：

 .foo { width: 500px; height: 50px; background-color: powderblue; display: inline-block; } .img { width: 50px; height: 50px; } .bar { vertical-align: middle; } 

 <div class="foo"> <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt=""> <span class="bar"> Lorem ipsum dolor sit amet </span> </div> 

我也嘗試過使用display: inline-block並期望我現在可以將span對准div的中間。 為什么這不起作用？

Answer 1

內聯元素的默認垂直對齊方式是基線。 因此，將其更改為適合您需要的內容，例如中級。

 .foo { width: 500px; height: 50px; background-color: powderblue; display: inline-block; } .img { width: 50px; height: 50px; vertical-align: middle; } .bar { vertical-align: center; } 

 <div class="foo"> <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt=""> <span class="bar"> Lorem ipsum dolor sit amet </span> </div> 

Answer 2

“居中”不是垂直對齊的有效值，我認為您的意思是“居中”。

https://developer.mozilla.org/es/docs/Web/CSS/vertical-align

同樣，display：inline-block在這里對您無能為力，因為它應該在子元素（如果有）上，而不是容器上。

您需要解決的所有事情是在img上使用vertical-align：middle。

 .foo { width: 500px; height: 50px; background-color: powderblue; } .img { width: 50px; height: 50px; vertical-align:middle; } 

 <div class="foo"> <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt=""> <span class="bar"> Lorem ipsum dolor sit amet </span> </div>