垂直对齐无法在内联块

Question

我被告知：

  

垂直对齐仅适用于内联，内联块，图像和表格   元素。
它必须适用于儿童元素，与之相对   父元素，与text-align不同。

但是，当我尝试在内联块元素上设置垂直对齐中间时，它没有工作。为什么呢？

＆＃13;

＆＃13;

#wrapper {
border: 1px solid black;
width: 500px;
height: 500px;
}
#content {
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}

＆＃13;

<div id = 'wrapper'>
<div id = 'content'> content </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

它不起作用，因为vertical-align设置了内联级内容相对于其行框的对齐方式，而不是它们的包含块：

  

此属性会影响行框内的垂直定位   由内联级元素生成的框。

line box是

  

包含形成一行

的框的矩形区域

当您看到一些包含多行的文本时，每一行都是一个行框。例如，如果你有

＆＃13;

＆＃13;

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }

＆＃13;

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

＆＃13;

＆＃13;

＆＃13;

如果只有一行，就像你的情况一样，它也是一个行框

在该行框内垂直使用vertical-align: middle个中心.content。但问题是线框不是在包含块内垂直居中。

如果您想在包含块的中间垂直居中，请参阅How to align text vertically center in div with CSS?

Answer 2

Vertical-align关于内联/内联块元素，图像，文本...将元素对齐在一起，而不是与父元素对齐。

用法示例：在文本中对齐笑脸图像

你可以通过添加0px宽度，100％高度伪元素

来作弊

＆＃13;

＆＃13;

#wrapper {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    vertical-align: middle;
}
#wrapper:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
}
#content {
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
}

＆＃13;

<div id = 'wrapper'>
    <div id = 'content'> content </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用vertical-align：text-top;

对我有用

<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>

.box {
   display: inline-block;
   width: 20%;
   margin: 5px;
   padding:10px;
   border-top: 5px solid #000000;
   vertical-align: text-top;
}

jsfiddle