我没有“获取”垂直对齐css属性

提问者：小点点

我没有“获取”垂直对齐css属性

我不明白Vertical-Align什么时候起作用，什么时候不起作用。

每次我遇到Vertical-Align的用例时，它是否真的能工作似乎都是一个掷硬币的问题。我知道它必须应用于内联元素。我读到必须为通常没有line-heighth的元素指定一个line-heighth。我读到height属性必须具有静态（非自动/非%）值。我读到一些（现代）浏览器不能正确处理vertical-align，如果它们所使用的元素不是天生的内联元素。我不清楚vertical-align应该在包含元素上（像text-align)还是在我想要垂直对齐的元素上。

我创建了这个jsfiddle来尝试解决这个问题，但是仍然感到困惑。

null

#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>

null

在上面的jsfiddle中，我希望#header位于#outer和#inner的顶部和底部中间。显然，事实并非如此。

共2个答案

匿名用户

简单地说:vertical-align仅当应用它的元素具有display:inlin-block或ênline时才有效/有效，例如，如果您想在它们的顶部边框对齐一组图像，则这很有用:您将它们定义为inlin-block并对它们应用vertical-align:top

下面是一个例子:

null

.wrapper {
  height: 250px;
  border: 1px solid green;
}

.wrapper>img {
  display: inline-block;
  vertical-align: top;
}

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

匿名用户

最简单的方法来理解为什么添加多行文本不起作用，因为垂直对齐将在相应的行（行框）上对齐，而不是像您可能认为的那样对齐整个容器。

因此，如果我们添加更多的文本，我们将得到以下内容。

null

#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>