[英]display: inline-block, span does not align properly
I've tried the vertical-align
property, but failed to align the span
in the middle: 我已经尝试过
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>
I've also tried with the display: inline-block
and expected that I could now align the span
in the middle of the div
. 我也尝试过使用
display: inline-block
并期望我现在可以将span
对准div
的中间。 Why is this not working? 为什么这不起作用?
The default veritcal alignment of inline elements is baseline. 内联元素的默认垂直对齐方式是基线。 So change it to something that fits what you need, like middle.
因此,将其更改为适合您需要的内容,例如中级。
.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>
"center" is not a valid value for vertical-align, I think you mean "middle". “居中”不是垂直对齐的有效值,我认为您的意思是“居中”。
https://developer.mozilla.org/es/docs/Web/CSS/vertical-align https://developer.mozilla.org/es/docs/Web/CSS/vertical-align
Also, display:inline-block is doing nothing for you there, as it should be on the child elements (if at all), not the container. 同样,display:inline-block在这里对您无能为力,因为它应该在子元素(如果有)上,而不是容器上。
All you need to solve this is use vertical-align:middle on the img. 您需要解决的所有事情是在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.