Question

我有一个包含一些内容的div。它的高度为31px，在它内部，按钮的高度较小。

<div class="headerAndButton">
    <h3 class="h3">
        Click the button to the right
        <button>click me</button>
    </h3>
</div>

我有另一个标题，里面没有按钮。

<div class="headerAndButton">
    <h3 class="h3">No button here, I only want to have this header have the same vertical alignment, height and margin as the other header</h3>
</div>

我想垂直对齐每个div中的<h3>文本。我试图通过以下SCSS解决问题：

.headerAndButton {
  margin-bottom: $space-300;

  h3 {
    min-height: 31px;
    vertical-align: bottom;

    button {
      margin-left: $space
    }
  }
}

vertical-align属性没有明显效果。没有底部的文字是顶部对齐的。另一个文本略低一些。如果我删除按钮，它也会变为顶部对齐。

如何使此标题具有相同的垂直对齐方式？我不擅长CSS，所以也许有更好的方法来解决这个问题。

Answer 1

您可以使用多种方法垂直对齐元素。例如，您可以使用新的display: flex方法：

display: flex;
justify-content: center;
flex-direction: column;

Example

如果您的元素position: absolute没问题，可以使用

position: absolute;
top: 50%;
transform: translate(-50%, -50%);

CSS-Tricks有一个非常好的教程，名为Centering in CSS: A Complete Guide。

Answer 2

display: flex;
justify-content: center;
align-items: center;

只需在headerAndButton

上应用此CSS代码即可

Answer 3

您可以使用display:table-cell然后vertical-align:middle来执行此操作。

JS Fiddle

（我添加一个边框，这样你就可以看到h3已对齐）

将内容垂直对齐到div的中间？

3 个答案: