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

4 года назад

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

Присоединяйтесь к нашему Telegram-сообществу

Ответы

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

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

3 года назад

Вячеслав Межуревский

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

2 месяца

Bootstrap

Навык работы с SASS, Bootstrap 5 и Gulp для ускорения, упрощения и оптимизации процесса вёрстки и разработки сайтов

Похожие вопросы