[英]HTML & CSS: Vertical centering of inline elements inside an inline-block
I've read about 20 questions and articles on vertical alignment/centering in HTML/CSS, but I'm still unable to get my specific case working a expected. 我已经阅读了大约20个关于HTML / CSS中垂直对齐/居中的问题和文章,但我仍然无法让我的具体案例符合预期。
Please have a look at http://jsfiddle.net/pf29r/3/ 请看http://jsfiddle.net/pf29r/3/
<div class="outer">
<div>Left1</div>
<div>Left2</div>
</div>
<div class="inner">
<a href="#">Before</a>
<span>Middle</span>
<a href="#">After</a>
</div>
<div class="outer">
<div>Right1</div>
<div>Right2</div>
</div>
.outer {
display: inline-block;
}
.inner {
display: inline-block;
}
I want to vertically center the content of the inner block. 我想垂直居中内部块的内容。 The best I've been able to accomplish was by using display: table and display: table-cell, which almost works, but the content isn't quite in the middle.
我能够实现的最好的方法是使用display:table和display:table-cell,它几乎可以工作,但内容并不是中间的。
What am I missing? 我错过了什么?
Add vertical-align: middle
to .outer
. 添加
vertical-align: middle
到.outer
。 This is counter-intuitive because you would expect to have to add it to .inner
, but it works. 这是违反直觉的,因为您可能希望将它添加到
.inner
,但它可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.