如何在嵌套div中对齐h2？

Question

我正在尝试在h2元素中对齐文本。我希望它在div中垂直居中。我在.NET MVC工作

我的HTML :(这是给我带来麻烦的唯一部分）具体来说：

.banner-side-container {
  height: 240px;
  width: 180px;
  vertical-align: middle;
}

.banner-side-container h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.view-teams-banner {
  margin-top: 10px;
  height: 110px;
  width: 180px;
  background-color: aqua;
  border-radius: 20px;
}

.view-matches-banner {
  margin-top: 10px;
  height: 110px;
  width: 180px;
  background-color: darkorchid;
  border-radius: 20px;
}

<td>
  <div class="banner-side-container">
    <div class="view-teams-banner">
      <h2>View Teams</h2>
    </div>
    <div class="view-matches-banner">
      <h2>View Matches</h2>
    </div>
  </div>
</td>

我试过添加vertical-align：middle;所有4个选择器都没有成功。更多信息：text-align：center;工作得很好。

Answer 1

您可以使用flex并将以下设置添加到包装h2s及其父元素的三个元素中，如下所示：

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

.banner-side-container {
  height: 240px;
  width: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-side-container h2 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.view-teams-banner {
  margin-top: 10px;
  height: 110px;
  width: 180px;
  background-color: aqua;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.view-matches-banner {
  margin-top: 10px;
  height: 110px;
  width: 180px;
  background-color: darkorchid;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<td>
  <div class="banner-side-container">
    <div class="view-teams-banner">
      <h2>View Teams</h2>
    </div>
    <div class="view-matches-banner">
      <h2>View Matches</h2>
    </div>
  </div>
</td>