如何在嵌套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>