显示：内联块，跨度未正确对齐

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>