如何在网格单元格内垂直居中元素？

Question

<div class='card'>
<div class='imgwrap'>...</div>
<div class='cardr'>
<a class='infor' href='...'>lorem ipsum</a>
</div>
</div>

css

.card{
    display:grid;
    grid-template-columns: 54px auto;
}

.cardr{
    text-align:center;
    background:silver;
    align-items: center;  // line a
}

.infor{
    display:inline-block;
    border:1px solid #555;
    padding:4px 14px;
    border-radius:11px;
    background:gold;
    align-self:center;  // line b
}

我需要 infor 都在 cardr 内居中。

水平居中使用 text-align: center 和 display:inline-block

使用 line a and/or line b 我想将它垂直居中但没有成功。

有什么帮助吗？

Answer 1

一种方法是添加 .cardr { display: flex; } 和 .infor { margin: auto; }。

这样 .infor 将水平和垂直对齐。

如何在网格单元格内垂直居中元素？

How to vertically center elements inside a grid cell?

css

centering

css-grid