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

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和/或line b我想垂直居中，但没有成功。

有帮助吗？

Answer 1

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

这样，.infor将在水平和垂直方向上对齐。