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

Posted 2023-03-05

【中文标题】如何在网格布局中垂直对齐 div？ [复制]

【英文标题】：How can I vertically align divs inside a grid layout? [duplicate]

【发布时间】：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，不，我希望每个网格子项的顶部和底部边距相同。

【参考方案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 的精彩链接