如何在网格布局中垂直对齐 div？ [复制]答案

【问题标题】：How can I vertically align divs inside a grid layout? [duplicate]如何在网格布局中垂直对齐 div？ [复制]
【发布时间】：2019-05-29 11:44:09
【问题描述】：

为什么 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>

【问题讨论】：

赞成这个，因为你包含了一个工作代码 sn-p :) 你想把每个 div 垂直放在彼此之上吗？
@YvonneAburrow，不，我希望每个网格子项的顶部和底部边距相同。

标签： html css vertical-alignment css-grid

【解决方案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>

【讨论】：

hmm...符号的上边距是一两个像素。

【解决方案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>

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

【讨论】：

有人可以解释一下 - 为什么Dogukan's 解决方案不完美 - 为什么我需要额外的padding 和spans - 为什么默认情况下不对齐 div？
似乎默认设置是让文本对齐底部而不是中心。回收图标与文本的高度略有不同。

【解决方案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>

【讨论】：

感谢 css-tricks 的精彩链接