Middle div vertical align: css — vertical align middle in

Как выровнять текст по центру элемента 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 и text-align к элементу div.

Использование свойства

Flexbox

Свойство flexbox также можно использовать для вертикального выравнивания текста по центру элемента div. Используйте justify-content:center для выравнивания и align-items:center в элемент div.

Пример: вертикальное выравнивание текста по центру с использованием свойства flexbox

В дополнение к justify-content и align-items, мы использовали свойство display: flex , height , width и border в коде.

Использование свойства преобразования CSS

Свойство transform вместе с position также может выравнивать содержимое div по вертикали по центру. Используйте позицию : относительная к родительскому элементу и позиция: абсолютный для дочернего элемента.

Пример: центрирование текста по вертикали с использованием свойства преобразования

В этом примере

transform: translate(-50%, -50%) используется для перемещения текста на 50% вверх и на 50% влево, чтобы центрировать его по вертикали.

Заключение

Существует несколько способов вертикального выравнивания текста внутри элемента 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 по центру текст вертикально.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *