Как выровнять текст по вертикали css
Ответы
Константин
16 марта 2023
Можно еще так выровнять :
display: flex;
width: 100%;
height: 100vh;
text-align: center;
justify-content: center;
align-items: center;
1
0
Вячеслав Межуревский
03 ноября 2022
За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom. Выравнивание по вертикали можно наглядно рассмотреть на примере таблицы.
Исходный HTML документ:
<table>
<tr>
<th class="bottom">Заголовок 1</th>
<th class="up-center">Заголовок 2</th>
</tr>
<tr>
<td >Текст 1</td>
<td class="up">Текст 2</td>
</tr>
</table>
Стили CSS:
table {
/* Схлапывание границы у таблицы */
border-collapse: collapse;
}
th, td {
/* Видимая граница ячеек */
border: 1px solid #000;
/* Внутренний отступ и размер ячеек */
padding: 5px;
width: 200px;
height: 60px;
}
.up {
vertical-align: top;
}
.up-center {
vertical-align: text-top;
}
.bottom {
vertical-align: bottom;
}
Результат:
0
0