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

Как центрировать текст по вертикали с помощью css

Я пытался найти, как центрировать текст по вертикали, но я не могу найти удовлетворительный ответ. Лучший ответ, который я нашел до сих пор, this. Это делает его похожим на то, что он позволяет мне центрировать текст по вертикали, но если я его использую и добавляю больше текста, он расширяется только донизу и не перецентрируется, как то, что происходит по горизонтали.

Заметьте, я ищу только CSS-решение, поэтому нет javascript. Заметьте, я хочу иметь возможность добавлять несколько строк текста.

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

Мое окончательное решение, Примечание: vertical-align не работает, если у вас есть float: осталось в том же div.

ОТВЕТЫ

Ответ 1

Вы можете установить контейнер display:table-cell и добавить vertical-align:middle :

(Но IE7 и ниже этого не понравится. )

Ответ 2

Ну, есть несколько решений.

Для многострочных линий вам нужно поместить поле "a-box-in-a-box"

Проблема заключается в том, что "высота" вашего многострочного слоя должна быть известна (или, по крайней мере, догадываться), поэтому она фактически центрирует вертикальные.

ЧТО ВАМ НУЖНО ЗНАТЬ

Нет чистого метода CSS, чтобы узнать о высоте элемента, который затем позволит нам центрировать его вертикально "адаптивным" способом!

Это означает, что при изменении текста вы также должны изменить CSS, чтобы убедиться, что он все еще подходит.

Это может быть раздражающим и что где и почему большинство людей возвращается к использованию javascript для работы над этим раздражением CSS "недостающей функции". В конце концов, javascript облегчает нам все (по крайней мере, в таких случаях).

MORE

Там много Q & A об этом происходит вокруг Интернета и вокруг этого веб-сайта. Если вы их пропустили, вот некоторые из них:

  • как центрировать текст по вертикали в html, используя только css
  • CSS вертикально и горизонтально в центре Div
  • Текст центра вертикально внутри <DIV>
  • CSS вертикально и горизонтально в центре Div
  • как центрировать текст по вертикали в html, используя только css
  • Как вертикально и горизонтально центрировать P текста на странице

и есть еще много; все из которых обеспечивают индивидуальные решения для отдельных случаев. Это поможет вам стать более уверенным (поскольку вы изначально заявили, что вы новичок в этом стиле CSS).

Ответ 3
Ответ 4

Вы можете использовать высоту линии, равную высоте его родительского контейнера.

Как центрировать текст по вертикали с помощью CSS?

Как центрировать текст по вертикали с помощью CSS?

Это работает только для одной строки текста, потому что мы устанавливаем высоту строки на ту же высоту, что и содержащий элемент box.

Более универсальный подход

Это еще один способ выровнять текст по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но по-прежнему требует контейнера фиксированной высоты:

CSS просто определяет размер

Моделирование отображения таблицы

А вот еще один вариант, который может не работать в старых браузерах, не поддерживающих display: table и display: table-cell (в основном просто Internet Explorer 7). Используя CSS, мы моделируем поведение таблицы (поскольку таблицы поддерживают вертикальное выравнивание), а HTML такой же, как и во втором примере:

Использование абсолютного позиционирования

Этот метод использует абсолютно позиционированный элемент, устанавливающий верхний, нижний, левый и правый угол в 0. Более подробно он описан в статье в Smashing Magazine. Абсолютное горизонтальное и вертикальное центрирование в CSS.

  • 60 Потому что что-то идет не так, если div или текст изменяются или добавляется больше содержимого.
  • 12 Но это то, что он сказал, если вы знаете, сколько текста вы будете использовать, это вполне приемлемо . решение ниже, однако, более гибкое
  • 3 В моем Firefox 22.0 хорошо работает только 3-й подход, однако он работает не во всех браузерах. Первые 2 подхода перестают работать должным образом, как только я изменяю размер высоты для div
  • 7 Как я могу достичь той же цели, установив высоту div на: "height: 100%;" ?
  • 9 table-cell техника довольно крутая, но затем содержимое изменяется, чтобы соответствовать родительскому контейнеру. Вот отличная техника от CSS Tricks с использованием псевдоэлемента before : css-tricks.com/centering-in-the-unknown. Размер содержимого таким образом не изменяется, но он работает только в IE8 +.

Другой способ (здесь еще не упомянут) — использование Flexbox.

Просто добавьте следующий код в контейнер элемент:

Демонстрация Flexbox 1

В качестве альтернативы, вместо выравнивания содержимого через контейнер, flexbox также может центрировать a гибкий элемент с автоматическим запасом когда в гибком контейнере есть только один flex-элемент (как в примере, приведенном в вопросе выше).

Итак, чтобы центрировать гибкий элемент по горизонтали и вертикали, просто установите его с помощью margin:auto

Flexbox Demo 2

NB: Все вышесказанное относится к центрированию предметов при их раскладке в горизонтальные ряды. Это также поведение по умолчанию, потому что по умолчанию значение для flex-direction является row . Если же flex-элементы необходимо разместить в вертикальные колонны, тогда flex-direction: column должен быть установлен на контейнере, чтобы установить главную ось в качестве столбца и дополнительно justify-content и align-items свойства теперь работают наоборот с участием justify-content: center центрирование по вертикали и align-items: center центрирование по горизонтали)

flex-direction: column демо

Хорошее место для начала работы с Flexbox, чтобы увидеть некоторые его функции и получить синтаксис для максимальной поддержки браузера, — это flexyboxes.

Кроме того, поддержка браузеров в настоящее время очень хорошая: caniuse

Для кроссбраузерной совместимости для display: flex и align-items , вы можете использовать следующее:

  • 46 Опорный стол Flexbox
  • 3 Это работает и для меня, остальное выше не работает на моем сайте. Но визуальная студия не распознает display: flex .
  • Скрипка вообще не работает, текст по-прежнему на верхнем краю
  • 1 если у меня есть тег

Вы можете легко сделать это, добавив следующий фрагмент кода CSS:

Это означает, что ваш CSS, наконец, выглядит так:

  • 6 Однако похоже, что это убивает атрибуты поля.
  • 2 @Costa — Возможно, вам также придется разместить родительский div, если вы что-то перемещаете внутри этого div . проверьте stackoverflow.com/questions/2062258/…
  • к сожалению, это не поддерживает вертикальную прокрутку . вероятно, из-за display: table-cell . (
  • 2 Отключает min-heigth .

Для справки и для добавления более простого ответа:

Или как миксин SASS / SCSS:

Сообщение в блоге Себастьяна Экстрёма Вертикальное выравнивание всего с помощью всего 3 строк CSS:

Этот метод может привести к размытию элементов из-за того, что элемент размещен на &#171;половине пикселя&#187;. Решением для этого является установка его родительского элемента на preserve-3d. Как следующее:

Мы живем в 2015+, и Flex Box поддерживается всеми основными современными браузерами.

Так будут и дальше делаться сайты.

Узнать его!

  • 3 Чистый CSS: помогло мне, но мне почему-то пришлось использовать absolute позиционирование ..
  • У меня была та же проблема, что и у @ d4Rk. Мой (блочный) контейнер имел относительное позиционирование и высоту, а элемент, требующий вертикального центрирования (изображение), должен был быть абсолютно позиционирован. Какая сложная / простая проблема !! Надеюсь, что в следующей версии CSS будет простое / простое исправление.

Вся заслуга принадлежит владельцу этой ссылки @Sebastian Ekstr m Link; пожалуйста, пройдите через это. Посмотрите код в действии. Прочитав эту статью, я также создал демонстрационную скрипку.

С помощью всего трех строк CSS (исключая префиксы поставщиков) мы можем сделать это с помощью преобразования: translateY вертикально центрирует все, что мы хотим, даже если мы не знаем его высоту.

Преобразование свойств CSS обычно используется для поворота и масштабирования элементов, но с его функцией translateY теперь мы можем выравнивать элементы по вертикали. Обычно это нужно делать с абсолютным позиционированием или установкой высоты строки, но для этого вам необходимо знать высоту элемента или работать только с однострочным текстом и т. Д.

Итак, для этого пишем:

Это все, что вам нужно. Это метод, аналогичный методу абсолютного положения, но с той стороны, что нам не нужно устанавливать какую-либо высоту для элемента или свойства положения для родительского элемента. Он работает прямо из коробки, даже в Internet Explorer 9!

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

  • изменяя размер шрифта, он перемещается повсюду

В флексбоксах CSS3 есть небольшая магия:

Наконечник: Замените строку выше, отмеченную как &#171;Ключевая часть&#187;, одной из этих строк, если вы хотите центрировать текст:

Только по вертикали:

Только по горизонтали:

Как я заметил, этот трюк работает с сетками (т.е. display: grid ), также.

  • Не могли бы вы объяснить, почему в данном случае флекс так влияет на центрирование абзаца?
  • @elena На самом деле, я не знаю, почему, я обнаружил, когда пытался. Однако это будет рассмотрено для более новых версий CSS. Например, если вы измените отображение на сетку в этом случае, он будет работать так же, как гибкие боксы. Я думаю, что сетки и флексбоксы содержат новые функции, позволяющие компенсировать предыдущие ошибки CSS; и этот трюк — один из них.

Гибкий подход

Я видел предыдущие ответы, и они будут работать только для этой ширины экрана (не реагируют). Для отзывчивости нужно использовать flex.

Решение, принятое в качестве ответа, идеально подходит для использования line-height такая же, как высота div, но это решение не работает идеально, когда текст обернут ИЛИ находится в двух строках.

Попробуйте это, если текст обернут или находится на нескольких строках внутри div.

Для получения дополнительной информации см .:

Многострочный текст по центру по вертикали

6 методов вертикального центрирования с помощью CSS

Попробуйте это решение:

Создан с использованием CSS +.

Вы можете использовать следующий фрагмент кода в качестве справки. Для меня это работает как шарм:

Вывод приведенного выше фрагмента кода выглядит следующим образом:

Вы также можете использовать свойства ниже.

    Спасибо satwik boorgula, я не думаю, что у вас проблемы с кодом, возможно, в моем коде есть конфликт. Я тестирую этот код:

Не устанавливайте height атрибут div , но вместо этого используйте padding: для достижения эффекта. Как и в случае с высотой строки, он работает, только если у вас одна строка текста. Хотя таким образом, если у вас больше контента, текст все равно будет центрирован, но сам div будет немного больше.

Итак, вместо того, чтобы идти с:

Ты можешь сказать:

Это установит верх и низ padding из div к 60px , а слева и справа padding к нулю, делая div 120 пикселей (плюс высота шрифта) в высоту и размещение текста вертикально по центру в div.

Вот еще один вариант использования flexbox.

Результат

Вот отличная статья о центрировании в css. проверьте https://ishadeed.com/article/learn-css-centering/

  • Это лучший ответ. Просто и без фиксированных значений высоты и ширины.

Я не уверен, что кто-то пошел writing-mode маршрут, но я думаю, что он решает проблему чисто и имеет широкая поддержка:

Это, конечно, будет работать с любыми размерами, которые вам нужны (кроме 100% родительского). Если вы раскомментируете границы, будет полезно ознакомиться.

Демо JSFiddle для вас.

Поддержка Caniuse: 85,22% + 6,26% = 91.48% (есть даже Internet Explorer!)

Для всех ваших потребностей в вертикальном выравнивании!

Объявите этот Mixin:

Затем включите его в свой элемент:

  • 2 Отлично работает. Просто комментарий для некоторых читателей: это код Sass.

Еще лучшая идея для этого. Вы тоже можете это сделать

Для одной строки текста (или одного символа) вы можете использовать эту технику:

Это мочь использоваться, когда #box имеет нефиксированный, относительная высота в%.

Посмотрите живую демонстрацию на JsBin (проще редактировать CSS) или JsFiddle (легче изменить высоту рамки результата).

Если вы хотите разместить внутренний текст в HTML, а не в CSS, вам необходимо обернуть текстовое содержимое дополнительными в линию элемент и редактировать #box::after чтобы соответствовать этому. (И, конечно, content: собственность должна быть удалена.)

Для поддержки Internet Explorer 8 необходимо заменить :: с участием : .

  • Из всех методов, описанных здесь, ваш был единственным, который творит чудеса. Мой случай: div, у которого был элемент span со значком вращающихся часов с использованием css (для слоя загрузки). Я просто удалил "TextContent" (оставив свойство как пустую строку) для #box :: after, и все.

Попробуйте свойство transform:

Самый простой и универсальный способ (как и в случае с таблицей Михилву):

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

Очень простое и мощное решение для вертикального выравнивания центра:

  • 1 Но это не вертикальный центр .
  • 1 Это если поменять "верх: 45%;" на &#171;верх: 50%;&#187;. Просто попробовал с одной, двумя, тремя линиями в круге, и центр был идеально выровнен.

Следующий код поместит div в середину экрана независимо от размера экрана или div размер:

Подробнее о flex Вот.

Попробуйте следующий код:

Я просто хотел бы расширить ответ от Michielvoo, чтобы освободить потребность в высоте строки и дыхании высоты div. По сути, это просто упрощенная версия, подобная этой:

ПРИМЕЧАНИЕ: закомментирована часть css необходимо для fixed-height вложения div .

Мне нужен был ряд интерактивных слонов с вертикальным центрированием, но без использования стола, чтобы обойти некоторые странности Internet Explorer 9.

В конце концов я нашел самый лучший CSS (для своих нужд), и он отлично работает с Firefox, Chrome и Internet Explorer 11. К сожалению, Internet Explorer 9 все еще смеется надо мной .

Очевидно, что границы вам не нужны, но они могут помочь вам понять, как это работает.

Вы можете использовать метод позиционирования в CSS:

Посмотрите результат здесь .

Надеюсь, вы тоже воспользуетесь этим методом.

Установите это в button вместо div если вас не волнует его небольшой визуальный 3D-эффект.

Абсолютное позиционирование и растяжка

Как и в случае с описанным выше методом, этот начинается с установки позиционирования родительского и дочернего элементов как относительного и абсолютного соответственно. Оттуда все по-другому.

В приведенном ниже коде я снова использовал этот метод для центрирования дочернего элемента по горизонтали и вертикали, хотя вы можете использовать этот метод только для вертикального центрирования.

HTML

CSS

Идея этого метода состоит в том, чтобы попытаться заставить дочерний элемент растянуться на все четыре края, установив верхнее, нижнее, правое и левое значения на 0. Поскольку наш дочерний элемент меньше, чем наши родительские элементы, он не может охватить все. четыре края.

Однако установка auto в качестве поля со всех четырех сторон приводит к тому, что противоположные поля становятся равными и отображает наш дочерний div в центре родительского div.

К сожалению, вышеуказанное не будет работать в Internet Explorer 7 и более ранних версиях, и, как и в предыдущем методе, содержимое дочернего div может стать слишком большим, что приведет к его скрытию.

Добавьте этот небольшой код в свойство CSS вашего элемента. Это превосходно. Попытайся!

Новые браузеры теперь поддерживают CSS calc функция. Если вы ориентируетесь на эти браузеры, вы можете попробовать сделать что-то вроде этого:

Ключ в том, чтобы использовать style = ‘top: calc(50% — &lsqb;innerFixedHeightInPX/2&rsqb;px); height: &lsqb;innerFixedHeightInPX&rsqb;px;’ внутри абсолютного или относительно позиционированного родительского div.

css выравнивание по вертикали в таблице

Свойство CSS vertical-align отвечает за вертикальное выравнивание текста, картинок на странице. Важной особенностью является то, что он работает только с элементами таблицы, inline и inline-block элементами. Поддерживается всеми современными браузерами.

Синтаксис CSS vertical-align

Где value может принимать следующие значения:

  • baseline &#8212; выравнивание по базовой линии предка (или просто нижняя граница родителя)
  • bottom &#8212; выравнивание по нижней части строки (или элемента, который располагается ниже всех)
  • middle &#8212; выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента
  • sub &#8212; отображение происходит под строкой (выглядит как подстрочный индекс)
  • super &#8212; отображение происходит над строкой (как верхний индекс)
  • text-bottom &#8212; выравнивание нижней границы элемента по нижнему краю строки
  • text-top &#8212; выравнивание верхняя границы элемента по верхнему краю строки
  • top &#8212; выравнивание верхняя края элемента по верху самого высокого элемента строки
  • inherit &#8212; наследует значение родителя
  • значение &#8212; указывается в пикселях. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз
  • проценты &#8212; указывается в процетах. Положительное число смещает вверх относительно базовой линии. Отрицательное вниз

Значение vertical-align по умолчанию:

  • baseline (для строчных элементов)
  • middle (для ячеек таблицы)

Вертикальное выравнивание в таблицах

Чаще всего vertical-align используется в ячейках таблиц. В теге используют атрибут valign .

Синтаксис CSS valign для таблиц

Где value может принимать следующие значения:

  • baseline &#8212; выравнивание по базовой линии первой текстовой строки
  • bottom &#8212; выравнивание по нижнему краю ячейки таблицы
  • middle &#8212; выравнивание по середине ячейки
  • top &#8212; выравнивание верхнему краю ячейки

Преобразуется на странице в следующее:

Выравнивание по верху
Выравнивание по низу

Примеры с вертикальными выравниваниями

Пример 1. Значения vertical-align: baseline, bottom, top, sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

Ниже представлены примеры вертикального выравнивания с абсолютным значением и процентами.

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы «X» (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align=»center» тега

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать , код при этом перестает быть валидным.

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

Выравнивание по горизонтали

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега

, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.

Рис. 1. Выравнивание элементов по горизонтали

Рассмотрим некоторые примеры выравнивания текста согласно приведенному рисунку.

Выравнивание по верхнему краю

Для указания выравнивания содержимого ячеек по верхнему краю, для тега

Пример 2. Использование valign

В данном примере характеристики ячеек управляются с помощью параметров тега

Пример 3. Применение стилей для выравнивания

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom .

Выравнивание по центру

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

css выравнивание по вертикали в таблице

Рис. 2. Добавление формулы в документ

В подобном случае формула располагается строго по центру окна браузера, а ее номер — по правому краю. Для такого размещения элементов понадобится таблица с тремя ячейками. Крайние ячейки должны иметь одинаковые размеры, в средней ячейке выравнивание делается по центру, а в правой — по правому краю (пример 4). Такое количество ячеек требуется для того, чтобы обеспечить позиционирование формулы по центру.

Пример 4. Выравнивание формулы

В данном примере первая ячейка таблицы оставлена пустой, она служит лишь для создания отступа, который, кстати, может быть установлен и с помощью стилей.

Выравнивание элементов формы

С помощью таблиц удобно определять положение полей формы, особенно, когда они перемежаются с текстом. Один из вариантов оформления формы, которая предназначена для ввода комментария, показан на рис. 3.

css выравнивание по вертикали в таблице

Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align=»right» . Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign .

css выравнивание по вертикали в таблице

Приветствую вас на сайте Impuls-Web!

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

В сегодняшней статье я хотела бы рассмотреть наиболее эффективные способы выравнивания текста по вертикали в CSS, которые вы смогли бы запомнить или добавить к себе куда-нибудь в шпаргалку и использовать в зависимости от ситуации.

Навигация по статье:

css выравнивание по вертикали в таблице

Свойство для вертикального выравнивания vertical-align

Базовым свойством, которое позволяет сделать в CSS выравнивание по вертикали является vertical-align.

В основном для выравнивания текста по вертикали css вам понадобятся значения top, middle, bottom. Они подходят для большинства случаев.

Так, в случае если нам нужно выровнять текст в каком-то блоке, то для начала оборачиваем его в тег

и задаем для него стиль vertical-align:middle;

Но на практике все оказывается немного сложней. Дело в том что данное свойство срабатывает только для табличных элементов и для того чтобы оно заработало нужно будет пойти на одну хитрость.

Для родительского элемента, то есть блока, в котором находится текст, мы задаем свойство display:table, а для абзаца с тексом – display:table-cell. В этом случае блок преобразуется в таблицу, а абзац в ячейку таблицы.

«>

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

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