Search code examples
csscenteringcss-grid

How to vertically center elements inside a grid cell?

<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
}

I need infor to be both centered inside cardr.

Horizontally centering works using text-align: center and display:inline-block

Using line a and/or line b I want to center it vertically but without success.

Any help?

Solution

  • One way to do it is to add .cardr { display: flex; } and .infor { margin: auto; }.

    This way .infor will be aligned both horizontally and vertically.