我不明白什么时候vertical-align会和不会工作。
每次我遇到一个用例vertical-align至于它是否真的有效，这似乎是一个抛硬币的问题。我知道它必须应用于内联元素。我读到我必须指定一个line-height对于通常没有的元素。我读过height属性必须具有静态（非自动/非%）值。我读到一些（现代）浏览器无法处理vertical-align如果使用它们的元素本身不是内联元素，则正确。我不清楚是否vertical-align应该位于包含元素上（例如text-align) 或我想要垂直对齐的元素。
我已经创建了这个jsfiddle试图解决问题，但仍然感到困惑。
#outer {
box-sizing: border-box;
border: red 1px solid;
height: 200px;
width: 400px;
text-align: center;
}
#inner {
border: blue 1px solid;
display: inline-block;
height: 200px;
vertical-align: middle;
}
#header {
border: green 1px solid;
display: inline-block;
line-height: 1em;
margin: 0;
}
<div id="outer">
<div id="inner">
<h1 id="header">
Some Text
</h1>
</div>
</div>
在上面的 jsfiddle 中我期望#header位于顶部和底部之间的中间位置#outer and #inner。显然，事实并非如此。
理解为什么它不起作用的最简单方法是添加多行文本，因为垂直对齐将在相应的行（行框）上对齐，而不是像您想象的那样在整个容器上对齐。
因此，如果我们添加更多文本，就会得到以下内容。
#outer {
box-sizing: border-box;
border: red 1px solid;
height: 200px;
text-align: center;
}
#inner {
border: blue 1px solid;
height: 200px;
width:180px;
display: inline-block;
overflow:hidden;
}
.header {
display: inline;
border: green 1px solid;
margin: 0;
}
<div id="outer">
<div id="inner">
<h1 class="header">
Some Text Some Text Some Text
</h1>
</div>
<div id="inner">
<h1 class="header" style="vertical-align:middle;">
Some Text Some Text Some Text
</h1>
</div>
<div id="inner">
<h1 class="header" style="vertical-align:top;">
Some Text Some Text Some Text
</h1>
</div>
</div>
基本上不需要对齐，所有对齐方式几乎都是等效的，因为文本定义了行框，因此它的高度等于行框的高度，并且没有对齐的空间。
现在让我们增加行的高度（使用行高）
#outer {
box-sizing: border-box;
border: red 1px solid;
height: 200px;
text-align: center;
}
#inner {
border: blue 1px solid;
height: 200px;
width:180px;
line-height:200px;
display: inline-block;
}
.header {
display: inline;
border: green 1px solid;
margin: 0;
line-height:1em;
}
<div id="outer">
<div id="inner">
<h1 class="header">
Some Text Some Text Some Text
</h1>
</div>
<div id="inner">
<h1 class="header" style="vertical-align:middle;">
Some Text Some Text Some Text
</h1>
</div>
<div id="inner">
<h1 class="header" style="vertical-align:top;">
Some Text Some Text Some Text
</h1>
</div>
</div>
看看现在每行变得更大，每个文本在其各自的行上对齐，高度为200px我们可以清楚地看到对齐方式有何不同。
在这种情况下，文本有足够的空间可以按照您想要的方式对齐，如果我们只保留一行文本，我们就会看到神奇的效果：
#outer {
box-sizing: border-box;
border: red 1px solid;
height: 200px;
text-align: center;
}
#inner {
border: blue 1px solid;
height: 200px;
line-height: 200px;
display: inline-block;
}
.header {
display: inline;
border: green 1px solid;
margin: 0;
line-height:1em;
}
<div id="outer">
<div id="inner">
<h1 class="header">
Some Text
</h1>
<h1 class="header" style="vertical-align:middle">
Some Text
</h1>
<h1 class="header" style="vertical-align:top">
Some Text
</h1>
<h1 class="header" style="vertical-align:bottom">
Some Text
</h1>
</div>
</div>
您还可以注意如何middle and baseline非常接近，因为：
Aligns the middle of the element with the baseline plus half the x-height of the parentref
只有一半x-height的差异。
另一个需要注意的重要事实是，如果我们不为内联元素设置行高，则该元素将继承其父元素的行高和对齐方式，例如top不会有任何影响。
#outer {
box-sizing: border-box;
border: red 1px solid;
height: 200px;
text-align: center;
}
#inner {
border: blue 1px solid;
height: 200px;
line-height: 200px;
display: inline-block;
}
.header {
display: inline;
border: green 1px solid;
margin: 0;
}
<div id="outer">
<div id="inner">
<h1 class="header">
Some Text
</h1>
<h1 class="header" style="vertical-align:middle">
Some Text
</h1>
<h1 class="header" style="vertical-align:top">
Some Text
</h1>
</div>
</div>
将元素及其后代元素的顶部与整行的顶部对齐。
具有相同的行高意味着该元素已经位于行框的顶部和底部，因此两者top bottom其行为类似于基线（默认值）。
行框的高度也可以通过元素的高度来控制。您可能为一个元素设置较大的字体大小，这将使行的高度更大，并且有足够的空间在同一行框中对齐其旁边的小文本：
#outer {
box-sizing: border-box;
border: red 1px solid;
height: 200px;
text-align: center;
}
#inner {
border: blue 1px solid;
height: 200px;
display: inline-block;
}
.header {
display: inline;
border: green 1px solid;
margin: 0;
}
@keyframes change {
from {font-size:20px;}
to {font-size:100px;}
}
<div id="outer">
<div id="inner">
<h1 class="header">
Text
</h1>
<h1 class="header" style="font-size:100px;animation:change 5s linear alternate infinite">
T
</h1>
<h1 class="header" style="vertical-align:middle;">
Text
</h1>
<h1 class="header" style="vertical-align:top;">
Text
</h1>
<h1 class="header" style="vertical-align:bottom;">
Text
</h1>
</div>
</div>
您还可以通过设置高度来控制线框inline-block元素：
#outer {
box-sizing: border-box;
border: red 1px solid;
height: 200px;
text-align: center;
}
#inner {
border: blue 1px solid;
height: 200px;
display: inline-block;
}
.header {
display: inline;
border: green 1px solid;
margin: 0;
}
.elem {
display:inline-block;
background:red;
width:2px;
height:5px;
animation:change 5s linear alternate infinite;
}
@keyframes change {
from {height:20px;}
to {height:100px;}
}
<div id="outer">
<div id="inner">
<h1 class="header">
Text
</h1>
<div class="elem">
</div>
<h1 class="header" style="vertical-align:middle;">
Text
</h1>
<h1 class="header" style="vertical-align:top;">
Text
</h1>
<h1 class="header" style="vertical-align:bottom;">
Text
</h1>
</div>
</div>
作为结论：对齐使用vertical-align您应该有一个高度足够大的行框（明确设置或由其他元素设置），您可以在其中对齐元素。如果您的元素正在定义行框（这是常见情况），则无需对齐。
一些好问题以获得更多详细信息：
垂直对齐不适用于内联块
行内元素和行高
我的内联块元素没有正确排列
为什么这个内联块元素被向下推？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
