Как выровнять текст по вертикали css

4 года назад

Человек-Молекула

Ответы

Можно еще так выровнять :

display: flex;
    width: 100%;
    height: 100vh;
    text-align: center;
    justify-content: center;
    align-items: center;

3 года назад

Константин

За выравнивание по вертикали отвечает 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;
}

Результат: vertical-align