垂直对齐属性如何工作？

Question

我不明白什么时候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位置#inner。显然，事实并非如此。

Answer 1

简单地说：vertical-align仅当它应用于的元素具有display: inline-block或时才有效/有效\xc3\xacnline，例如，如果您想在顶部边框对齐一堆图像，这很有用：您将它们定义为inline-blocks并应用于vertical-align: top它们

\n\n

这是一个例子：

\n\n

\r\n

\r\n

.wrapper {\r\n  height: 250px;\r\n  border: 1px solid green;\r\n}\r\n\r\n.wrapper>img {\r\n  display: inline-block;\r\n  vertical-align: top;\r\n}

\r\n

<div class="wrapper">\r\n  <img src="https://placehold.it/120x40">\r\n  <img src="https://placehold.it/70x140">\r\n  <img src="https://placehold.it/80x60">\r\n  <img src="https://placehold.it/60x140">\r\n</div>

\r\n

\r\n

\r\n

\n\n

在你的小提琴中，元素彼此嵌套，而不是彼此相邻，即它们不是兄弟元素 - 每个元素只有一个子元素，因此不存在像上面示例中那样的兄弟元素对齐。

\n