Как выровнять текст по центру элемента DIV по вертикали с помощью CSS?
Ответ: Использование свойства CSS
vertical-align и line-height .В HTML элемент можно выровнять с помощью CSS. В CSS есть несколько свойств выравнивания. Одним из них является выравнивание текста по центру элемента Div по вертикали.
В этом уроке мы будем изучать способы выравнивания текста по центру по вертикали с помощью CSS.
Использование
вертикального выравнивания Свойство Свойство CSS vertical-align можно использовать для вертикального центрирования текста внутри элемента div. Кроме того, нам нужно добавить display: table / display: table-cell вместе с ним, чтобы центрировать элемент по вертикали относительно его родительского элемента.
Вы можете установить высоту, ширину и границу родительского элемента.
Пример: вертикальное выравнивание текста с помощью свойства vertical-align
В этой программе мы использовали vertical-align: middle для вертикального выравнивания текста по центру родительского элемента.
<голова> <мета-кодировка="utf-8">HTML <стиль> дел { отображение: таблица-ячейка; ширина: 250 пикселей; высота: 200 пикселей; отступ: 10 пикселей; граница: 5 пикселей сплошного синего цвета; вертикальное выравнивание: посередине; } <тело> Выровнять текст по центру по вертикали внутри элемента div
Выход
Вот вывод вышеуказанной программы.
Использование свойства
line-height Свойство line-height можно использовать для вертикального центрирования текста в div. Просто добавьте высоты строки , равной высоте элемента div.
Он добавит равные пробелы вверху и внизу элемента div, что приведет к центрированию текста по вертикали.
Пример: вертикальное выравнивание текста по центру с использованием высоты строки
Здесь значение line-height и height одинаково для элемента div.
Кроме того, мы добавили некоторые другие свойства, такие как width , border и к элементу div. text-align
Использование свойства
Flexbox Свойство flexbox также можно использовать для вертикального выравнивания текста по центру элемента div. Используйте justify-content:center для выравнивания и align-items:center в элемент div.
Пример: вертикальное выравнивание текста по центру с использованием свойства flexbox
В дополнение к justify-content и align-items, мы использовали свойство display: flex , height , width и border в коде.
Использование свойства преобразования CSS
Свойство transform вместе с position также может выравнивать содержимое div по вертикали по центру. Используйте позицию : относительная к родительскому элементу и позиция: абсолютный для дочернего элемента.
Пример: центрирование текста по вертикали с использованием свойства преобразования
В этом примере
Заключение
Существует несколько способов вертикального выравнивания текста внутри элемента div с помощью CSS. Вы объяснили некоторые способы с примерами для этого. Вы можете выбрать любой способ центрирования текста по вертикали.
6 приемов CSS для выравнивания содержимого по вертикали
Автор Agus in Coding. Обновлено .
Давайте поговорим о вертикальном выравнивании в CSS, а точнее о том, как это невозможно. CSS еще не предоставил официального способа центрировать содержимое по вертикали внутри своего контейнера. Это проблема, которая, вероятно, расстроила веб-разработчиков во всем мире. Но не бойтесь, в этом посте мы покажем вам несколько трюков, которые помогут вам имитировать эффект 9.
0114 .
Однако у этих трюков могут быть ограничения, и вам, возможно, придется использовать более одного трюка, чтобы создать иллюзию. Если вы знаете какой-либо другой трюк, сообщите нам об этом в комментариях.
Рекомендуемое чтение: Как получить равную высоту столбцов с помощью CSS
1. Использование абсолютного позиционирования
Первый трюк, который мы здесь рассмотрим, использует свойство position . У вас есть два <div> , один — контейнер, другой — дочерний элемент, содержащий содержимое.
Сначала мы установим относительную позицию элемента-контейнера, затем установим позицию дочернего элемента на абсолютную . Это позволяет нам свободно размещать его поперек контейнера.
Чтобы выровнять его по вертикали, переместите положение дочернего элемента сверху на половину высоты контейнера и подтяните его вверх на половину ширины дочернего элемента. Вот результат:
Этот трюк идеален, когда есть только один дочерний элемент, иначе абсолютный 9Позиция 0004 повлияет на другой элемент в том же контейнере.
2. Используйте преобразование CSS3
Преобразование CSS3 упрощает размещение содержимого в центре. Преобразование CSS3, в отличие от свойства position , не повлияет на положение других элементов в том же контейнере.
Предположим, что у нас та же структура HTML, что и в предыдущем методе — один родительский элемент, один дочерний элемент — 50% сверху и использование преобразования CSS дает перевод -50% . И вот оно.
Имейте в виду, что преобразования CSS3 не будут работать в Internet Explorer 8 и более ранних версиях. Возможно, вы захотите использовать любой из других методов в качестве запасного варианта.
3. Используйте Padding
Мы также можем использовать padding для создания иллюзии вертикального выравнивания. Для этого просто установите верхний и нижний отступы одинаково, как показано ниже:
Этот трюк подходит, когда вы не устанавливаете фиксированную ширину контейнера, а просто устанавливаете ширину на авто .
4. Использовать высоту строки
Если у вас есть только одна строка текстового содержимого в контейнере, вы можете выровнять текст по вертикали, используя свойство line-height . Установите значение line-height примерно таким же, как высота контейнера, и вы увидите следующий вывод.
Помните, что этот трюк работает только с одной строкой текста. Если содержимое разбивается на две или более строк, расстояние между каждой строкой будет таким, как мы указали в line-height , что дает нам слишком много пробелов.
5. Использование таблицы CSS
Лично мне больше всего нравится использовать таблицу CSS для применения вертикального выравнивания. Он работает в старых браузерах, таких как Internet Explorer 8. Этот метод выполняется путем установки отображения элемента контейнера на table , в то время как дочерний элемент должен отображаться как table-cell , а затем использовать свойство vertical-align по центру текст вертикально.