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

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 将水平和垂直对齐。