如何在嵌套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并将以下设置添加到包含h2及其父元素的三个元素，如下所示：

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>