如何在网格布局内垂直对齐div？

Question

为什么grid布局中的div默认情况下未对齐？

如何对齐它们？

.dpNav{
width:50%;
display:grid;
grid-template-columns: repeat(5, 1fr);
text-align:center;
background:gold;
}

<div class='dpNav' id='dpNav'>
<div class='yearTitle' id='yearTitle'>2019</div>
<div class='btnYear' id='btnYear'>&#x267B;</div>
<div></div>
<div class='monthTitle' id='monthTitle'>JAN</div>
<div class='btnMonth' id='btnMonth'>&#x267B;</div>
</div>

Answer 1

添加align-items:center;

.dpNav{
width:50%;
display:grid;
grid-template-columns: repeat(5, 1fr);
text-align:center;
background:gold;
align-items:center;
}

<div class='dpNav' id='dpNav'>
<div class='yearTitle' id='yearTitle'>2019</div>
<div class='btnYear' id='btnYear'>&#x267B;</div>
<div></div>
<div class='monthTitle' id='monthTitle'>JAN</div>
<div class='btnMonth' id='btnMonth'>&#x267B;</div>
</div>

Answer 2

.dpNav{
width:50%;
display:grid;
grid-template-columns: repeat(5, 1fr);
text-align:center;
vertical-align: middle;
background:gold;
padding-bottom: 2px
}

.text {
 padding-top: 3px;
 }

<div class='dpNav' id='dpNav'>
<div class='yearTitle text' id='yearTitle'>2019</div>
<div class='btnYear' id='btnYear'>&#x267B;</div>
<div></div>
<div class='monthTitle text' id='monthTitle'>JAN</div>
<div class='btnMonth' id='btnMonth'>&#x267B;</div>
</div>

如果您不喜欢我对填充的调整，也可以将内容放在跨度中，并将其CSS设置为vertical-align: middle。

Answer 3

在父容器中添加align-items:center将实现您所需要的。默认情况下未设置它的原因是让用户控制其位置。 CSS-Tricks对对齐网格中项目的不同方式进行了非常深入的细分。

.dpNav{
width:50%;
display:grid;
align-items:center;
grid-template-columns: repeat(5, 1fr);
text-align:center;
background:gold;
}

<div class='dpNav' id='dpNav'>
<div class='yearTitle' id='yearTitle'>2019</div>
<div class='btnYear' id='btnYear'>&#x267B;</div>
<div></div>
<div class='monthTitle' id='monthTitle'>JAN</div>
<div class='btnMonth' id='btnMonth'>&#x267B;</div>
</div>