Css text vertical align: How to Vertically Center Text with CSS

Пример

div + p {
  background-color: yellow;
}

Попробуйте сами »

Общий селектор родственных элементов (~)

Общий селектор родственных элементов выбирает все элементы, которые являются следующими одноуровневыми элементами указанного элемента.

В следующем примере выбираются все элементы

, которые являются следующими одноуровневыми элементами

: 

Пример

div ~ p {
  background-color: yellow;
}

Попробуйте сами »

---

Проверьте себя с помощью упражнений

Упражнение:

Измените цвет всех элементов

, являющихся потомками элементов

, на «красный».

<стиль>
 {
  красный цвет;
}

<тело>
<дел>
  
Это абзац.
  
Это абзац.

Это абзац.

Это абзац.

Начать упражнение

---

Все селекторы комбинаторов CSS

Селектор	Пример	Пример описания
элемент элемент	раздел стр	Выбирает все элементы внутри элементов
элемент>элемент	дел > р	Выбирает все элементы , родительским элементом которых является элемент
элемент+элемент	дел + р	Выбирает первый элемент , расположенный сразу после элементов
элемент1~элемент2	р ~ ул	Выбирает каждый элемент , которому предшествует элемент

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery 9005 Tops

3 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python

Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

---

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools использует W3.CSS.

css — Вертикальное выравнивание текста внутри div

На этот вопрос уже есть ответы здесь :

Как выровнять текст в div по вертикали? (34 ответа)

Закрыта 8 лет назад.

Приведенный ниже код (также доступный в качестве демонстрации на JS Fiddle) не размещает текст посередине, как мне бы хотелось. Я не могу найти способ центрировать текст по вертикали в div даже с использованием атрибута margin-top . Как я могу это сделать?

 <дел>
    
    1234
    еще одно текстовое содержимое, которое должно быть центрировано по вертикали

 # содержимое столбца {
    отображение: встроенный блок;
    граница: 1px сплошной красный;
    должность: родственница;
}
    
# столбец-контент сильный {
    цвет: #592102;
    размер шрифта: 18 пикселей;
}
картинка {
    поле сверху:-7px;
    вертикальное выравнивание: посередине;
}
 

• css
• вертикальное выравнивание

1

Андрес Ильич прав. На всякий случай, если кто-то пропустит свой комментарий…

A.) Если у вас есть только одна строка текста:

 отдел
{
  высота: 200 пикселей;
  высота строки: 200 пикселей; /* <-- это то, что вы должны определить */
} 

 
вертикально центрированный текст
 

B.) Если у вас несколько строк текста:

 div
{
  высота: 200 пикселей;
  высота строки: 200 пикселей;
}

охватывать
{
  отображение: встроенный блок;
  вертикальное выравнивание: посередине;
  высота строки: 18px; /* <-- настроить это */
} 

 
текст с центрированием по вертикали текст с центрированием по вертикали текст с центрированием по вертикали текст с центрированием по вертикали текст с центрированием по вертикали текст с центрированием по вертикали текст с центрированием по вертикали текст с центрированием по вертикали текст с центрированием по вертикали
 

6

Создайте контейнер для вашего текстового содержимого, возможно, span .

 # содержимое столбца {
  отображение: встроенный блок;
}
картинка {
  вертикальное выравнивание: посередине;
}
охватывать {
  отображение: встроенный блок;
  вертикальное выравнивание: посередине;
}

/* для наглядности */
# содержимое столбца {
  граница: 1px сплошной красный;
  положение: родственник;
} 

 <дел>

  
  1234
    еще одно текстовое содержимое, которое должно быть центрировано по вертикали
 

Дж. С. Фиддл

11

Обновление от 10 апреля 2016 г.

Флексбоксы теперь следует использовать для вертикального (или даже горизонтального) выравнивания элементов.

 корпус {
    высота: 150 пикселей;
    граница: 5px сплошной голубой;
    размер шрифта: 50px;
    
    дисплей: гибкий;
    выравнивание элементов: по центру; /* Вертикальное выравнивание по центру */
    выравнивание содержимого: по центру; /* Горизонтальное выравнивание по центру */
} 

 Middle 

Хорошее руководство по flexbox можно прочитать на CSS Tricks. Спасибо Бен (из комментариев) за указание на это. У меня не было времени обновить.

Хороший парень по имени Махендра разместил здесь очень рабочее решение.

Следующий класс должен центрировать элемент по горизонтали и вертикали относительно его родителя.

 .абсолютный центр {
    /* Internet Explorer 10 */
    отображение: -ms-flexbox;
    -ms-flex-pack: по центру;
    -ms-flex-align: по центру;
    /* Fire Fox */
    дисплей: -moz-box;
    -moz-box-pack: по центру;
    -moz-box-align: по центру;
    /* Safari, Opera и Chrome */
    дисплей: -webkit-box;
    -webkit-box-pack: по центру;
    -webkit-box-align: по центру;
    /* W3C */
    дисплей: коробка;
    коробка-упаковка: центр;
    выравнивание по рамке: по центру;
}
 

2

Принятый ответ не работает для многострочного текста.

Я обновил JSfiddle, чтобы показать вертикальное выравнивание многострочного текста CSS, как описано здесь:

 

    
еще одно текстовое содержимое, которое должно быть центрировано по вертикали

# содержимое столбца {
    граница: 1px сплошной красный;
    высота: 200 пикселей;
    ширина: 100 пикселей;
}
дел {
    отображение: таблица-ячейка;
    вертикальное выравнивание: посередине;
    выравнивание текста: по центру;
}
 

Также работает с
в "еще один. .."

1

Попробуйте это:

HTML

 
Текст
 

CSS

 раздел {
    высота: 100 пикселей;
}
охватывать {
    высота: 100 пикселей;
    отображение: таблица-ячейка;
    вертикальное выравнивание: посередине;
}
 

0

Это просто должно работать:

 # содержимое столбца {
        --------
    верхняя граница: авто;
    нижняя граница: авто;
}
 

Попробовал на вашей демо.

4

Чтобы сделать решение Омара (или Махендры) еще более универсальным, блок кода, относящийся к Firefox, следует заменить следующим:

 /* Firefox */
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
 

Проблема с кодом Омара, в противном случае работающим, возникает, когда вы хотите центрировать блок на экране или в его непосредственном предке. Это центрирование выполняется либо путем установки его положения на

положение: относительное; или позиция: статическая; (не с позицией: абсолютной и фиксированной).

И затем margin: auto; или поле-справа: авто; поле слева: авто;

В этой среде выравнивания по центру блока предложение Омара не работает. Он не работает и в Internet Explorer 8 (все еще 7,7% рынка). Таким образом, для Internet Explorer 8 (и других браузеров) следует рассмотреть обходной путь, как показано в других вышеперечисленных решениях.

1

Добавить вертикальное выравнивание к содержимому CSS #column-content strong тоже:

 #column-content strong {
    ...
    вертикальное выравнивание: посередине;
}
 

См. также обновленный пример.

=== ОБНОВЛЕНИЕ ===

С интервалом вокруг другого текста и другим выравниванием по вертикали:

HTML:

 . .. еще один текст, который должен быть центрирован по вертикали .. .
 

CSS:

 #column-content span {
    вертикальное выравнивание: посередине;
}
 

См. также следующий пример.

0

Это самый простой способ сделать это, если вам нужно несколько строк. Оберните текст span 'd в другой span и укажите его высоту с помощью line-height . Трюк с несколькими строками заключается в сбросе внутреннего span line-height .

 ВАШ ТЕКСТ ЗДЕСЬ
 

 .textvalignmiddle {
    line-height: /* Установить высоту */;
}
.textvalignmiddle > диапазон {
    отображение: встроенный блок;
    вертикальное выравнивание: посередине;
    высота строки: 1em; /* Возвращаем нормальную высоту строки */
}
 

DEMO

Конечно, внешний диапазон может быть div или чем-то еще.