How to vertically center elements inside a grid cell?

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
}

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?

Possible duplicate of [Centering in CSS Grid](https://stackoverflow.com/questions/45536537/centering-in-css-grid) — Michael Benjamin, Jan 02 '18 at 22:15

score 2 · Accepted Answer · answered Dec 31 '17 at 19:48

2

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.

answered Dec 31 '17 at 19:48

Konstantinos Poimenidis

94
1
3

@bonaca Glad it was helpful. You may want to change the title because infor is grandchild to the grid container. It would be helpful to other users. – Konstantinos Poimenidis Dec 31 '17 at 21:41

How to vertically center elements inside a grid cell?

1 Answers1