Центрирование вертикального текста в div

У меня есть этот div, который содержит текст внутри квадрата. Я хочу, чтобы текст внутри отображался прямо посередине - кажется, что нижняя часть моего текста находится посередине, в то время как я хочу, чтобы середина моего текста была посередине.

Мой css:

.touch {
border-radius: 3px;
background: #eee4da;
text-align: center;
font-weight: bold;
/*z-index: 10;*/
font-size: 30px; 
width: 60px;
height: 60px;
display: inline-block;
cursor: pointer;
justify-content: center;
align-items: center;
/*vertical-align: middle;*/
}
3 ответа

Вы должны удалить height и добавить padding к элементу. Пример здесь.

CSS:

.touch {
 border-radius: 3px;
 background: #eee4da;
 text-align: center;
 font-weight: bold;
 font-size: 30px; 
 width: 50px;
 cursor: pointer;
 align-items: center;
 padding: 10px;
}


.grid-row {
 margin-bottom: 10px; 
}

Центрирование работает с несколькими элементами, как вы можете видеть здесь.


На основе этого решения просто добавьте "display: table-cell";

.touch {
 border-radius: 3px;
 background: #eee4da;
 text-align: center;
 font-weight: bold;
 /*z-index: 10;*/
 font-size: 30px; 
 width: 60px;
 height: 60px;
 display: inline-block;
 cursor: pointer;
 justify-content: center;
 align-items: center;
 display: table-cell;
 vertical-align: middle;
}


Добавить

line-height: 60px; // same as div height

JSFiddle

licensed under cc by-sa 3.0 with attribution.