Vertical css align div: How to vertically center text with CSS?

Содержание

vertical-align - CSS | MDN

Свойство CSS  vertical-align описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).


vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;


vertical-align: 10em;
vertical-align: 4px;


vertical-align: 20%;


vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Свойство vertical-align может использоваться в двух контекстах:

  • Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать <img> в строке текста:
<p>
top:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
middle:<img src="https://mdn. mozillademos.org/files/15189/star.png"/>
bottom:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
super:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
sub:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
</p>
<p>
text-top:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
text-bottom:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
0.2em:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
-1em:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
20%:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
-100%:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
</p>

#* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 .5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
  • Для вертикального позиционирования содержимого ячейки таблицы:
<table>
  <tr>
    <td>baseline</td>
    <td>top</td>
    <td>middle</td>
    <td>bottom</td>
    <td>
      <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p>
<p>Существует и другая теория, согласно которой это уже случилось.</p>
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table, th, td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

Обратите внимание: свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.

Свойство vertical-align задаётся одним из ключевых значений, указанных ниже.

Значения для строчных элементов

Значения относительно родительского элемента

Данные значения позиционируют элемент по вертикали относительно родительского элемента:

baseline
Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов (en-US), таких как <textarea> (en-US), не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.
sub
Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
super
Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
text-top
Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
text-bottom
Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
middle
Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
<length>
Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
<percentage>
Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства line-height
) над базовой линией родительского элемента. Допустимы отрицательные значения.
Значения относительно строки

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

top
Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
bottom
Выравнивает нижний край элемента и его потомков с нижним краем всей строки.

Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).

Значения для ячеек таблицы

baselinesub, super, text-top, text-bottom, <length>, и <percentage>)
Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
top
Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.
middle
Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.
bottom
Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.

Допустимы отрицательные значения.

Формальный синтаксис

HTML

<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по умолчанию.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по верхнему краю.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по нижнему краю.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по центру.</div>

CSS

img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }

Результат

BCD tables only load in the browser

Разбираемся с vertical-align — Веб-стандарты

«Опять vertical-align не работает!» — вздохнёт веб-разработчик.

CSS-свойство vertical-align — одно из тех, которые с виду очень просты, но могут вызвать вопросы у начинающих разработчиков. Я думаю, что даже у многих ветеранов CSS когда-то были проблемы с тем, чтобы его до конца понять.

В этой статье я постараюсь в понятной форме рассказать про это свойство.

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

Распространенное заблуждение о vertical-align состоит в том, что применяясь к одному элементу, оно заставляет все элементы внутри него изменить свою вертикальную позицию. Например, когда элементу задан vertical-align: top, это подразумевает, что его содержимое поднимется к его же верхней границе.

Вспоминаются времена, когда мы делали раскладки на основе таблиц:

<td valign="top">
    Что-нибудь…
</td>

В данном примере с ячейкой таблицы использование свойства valign (в настоящее время исключенного из HTML5) приведёт к тому, что элементы внутри ячейки прижмутся к её верху. И естественно, когда верстальщики начинают использовать vertical-align, они думают, что получится то же самое, и содержимое элемента выровняется в соответствии со значением свойства.

Но vertical-align работает не так.

Чем оно является на самом делеСкопировать ссылку

Использование свойства vertical-align может быть разбито на три простых для понимания правила:

  1. Оно применяется только к строчным элементам inline или строчным блокам inline-block.
  2. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
  3. Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

Иными словами, следующий код не даст никакого эффекта:

div {
    vertical-align: middle; /* эта строка бесполезна */
}

Почему? Потому что <div> — это не строчный элемент и даже не строчный блок. Конечно, если вы сделаете его строчным или строчным блоком, то применение vertical-align даст желаемый эффект.

С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов.

Выше или ниже расположится элемент, будет зависеть от высоты строчных элементов на этой же строке или от свойства line-height, заданного для неё.

Несколько картинокСкопировать ссылку

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

А вот пример, в котором есть несколько строчных элементов, один из которых прижат к верху.

Ключевые словаСкопировать ссылку

Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align:

  • baseline, значение по умолчанию или «изначальное»
  • bottom
  • middle
  • sub
  • super
  • text-bottom
  • text-top
  • top

Возможно, многие из них вы не будете использовать, но было бы неплохо знать все имеющиеся варианты. Например, на демо-странице, из-за того что значение vertical-align для <input> установлено как top, он выровнен по самому высокому элементу в строке (большой картинке).

Однако если вы не хотите выравнивать элемент относительно картинок или других строчных элементов, обладающих блочными свойствами, вы можете выбрать значение text-top или text-bottom, тогда элементы будут выравниваться относительно текста в строке.

О ключевом слове

middleСкопировать ссылку

К сожалению, правило vertical-align: middle не выровняет строчный элемент по середине самого высокого элемента в строке (как вы, возможно, ожидали). Вместо этого значение middle заставит элемент выровняться по середине высоты гипотетической строчной буквы «x» (так же называемой x-height). Потому, мне кажется, что это значение на самом деле должно называться text-middle, чтобы стало понятно, какой будет результат.

Взгляните на пример, где я увеличил размер шрифта так, чтобы размер x-height стал гораздо больше. После этого станет понятно, что значение middle не получится использовать очень часто.

Числовые значенияСкопировать ссылку

Возможно, вы не знали о том, что vertical-align

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

input {
    vertical-align: 100px;
}

span {
    vertical-align: 50%;
}

img {
    vertical-align: -300px;
}

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

ЗаключениеСкопировать ссылку

Если в одной фразе подводить итог о том, как использовать это традиционно неправильно понимаемое свойство, я бы сказал:

Свойство vertical-align работает только со строчными элементами или строчными блоками и ячейками таблицы. В случае применения не к ячейкам таблицы, оно действует на сам элемент, а не на его содержимое.

vertical-align | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

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

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты

Значения

baseline
Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom
Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle
Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub
Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super
Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom
Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top
Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top
Выравнивание верхнего края элемента по верху самого высокого элемента строки.
inherit
Наследует значение родителя.

В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.

baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по ее верхнему краю.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
 </head>
 <body>
  <div>
  T<span>E</span>X и L<span 
 >A</span>T<span 
 >E</span>X
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства vertical-align

Объектная модель

[window.]document.getElementById("elementID").style.verticalAlign

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Комбинаторы CSS


Комбинаторы CSS

Комбинатор - это то, что объясняет взаимосвязь между селекторами.

Селектор CSS может содержать более одного простого селектора. Между простым селекторы, мы можем включить комбинатор.

В CSS есть четыре разных комбинатора:

  • Селектор потомков (пробел)
  • дочерний селектор (>)
  • Селектор соседних братьев (+)
  • общий родственный селектор (~)

Селектор потомков

Селектор потомков соответствует всем элементам, которые являются потомками указанного элемент.

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

внутри элементов

:


Селектор детей (>)

Дочерний селектор выбирает все элементы, которые являются дочерними элементами указанный элемент.

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

, которые дочерние элементы

элемент:



Селектор соседних братьев и сестер (+)

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

Родственные элементы должны иметь один и тот же родительский элемент, и «смежный» означает "сразу после".

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

, который помещается сразу после элементов

:


Общий селектор братьев и сестер (~)

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

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

, которые являются ближайшими родственниками элементов

:


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


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

Селектор Пример Описание примера
элемент элемент div p Выбирает все элементы

внутри элементов

элемент > элемент div> p Выбирает все элементы

, где родительский элемент

элемент + элемент div + p Выбирает первый элемент

, который помещается сразу после элементов

element1 ~ element2 пол Выбирает каждый элемент
    , которому предшествует элемент



CSS Вертикальное выравнивание для всех (чайники в комплекте)

"Вертикальное выравнивание CSS держит меня в напряжении!"

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

"Куда спешить, приятель?"

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

«У меня есть для вас хороший. У меня проблемы с центрированием моего контента. Это плохо, очень плохо. Я не мог заснуть. И знаете что? Все борются с этим, это может быть серьезным случаем. - подумайте о коллективном иске и обо всем остальном ».

Глупый наркотик не знал, во что ввязывается. Центрирование фрагмента контента по вертикали было огромным беспорядком, заваленным бюрократизмом. И он пошел вверх, вплоть до IE6. Но мне было жаль бедного ублюдка. Что я могу сказать; Я любитель слезливых историй.

«Успокойтесь, Рикардо. Алекс Сантос, эсквайр, мастер CSS, к вашим услугам».

. . .

Это могло быть не совсем так. Может быть, просто возможно, я приукрасил сказку.

Видите ли, мой коллега Рикардо - крупный бородатый парень - самопровозглашенный манекен CSS. Однажды он сказал мне, что все еще использует

в своей разметке. С точки зрения мастерства вертикального выравнивания CSS он пустышка.

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

Но не бойтесь: если вы боролись с вертикальным выравниванием CSS - как мой коллега, возможно, - вы попали в нужное место.

Давайте поговорим о свойстве CSS Vertical Align

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

Свойство CSS вертикального выравнивания гладко работает с таблицами, но не с div или любыми другими элементами. Когда вы используете его в div, он выравнивает элемент вместе с другими div, а не содержимое - что мы обычно хотим). Это работает только с display: inline-block; .

Вот пример:

См. Pen 1 # Example_OutSystems Experts - Выравнивание по вертикали на div от Александра Сантоса (@alexandre_santos) на CodePen.

Мы хотим центрировать контент, а не сам Div!

У вас есть два подхода. Если у вас есть только некоторые элементы div с текстом - например, панель навигации - вы можете использовать свойство line-height - это означает, что вам нужно знать высоту элемента, но вам не нужно устанавливать высоту. Таким образом, ваш текст всегда будет по центру.

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

Взгляните на этот пример:

См. Pen 2 # Example_OutSystems Experts - Navbar with line-height от Александра Сантоса (@alexandre_santos) на CodePen.

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

Для того, чтобы это работало, у вас должен быть родительский контейнер с display: table; , и внутри этого контейнера у вас будет количество столбцов, которые вы хотите выровнять по центру, с display: table-cell; vertical-align: middle; ) свойство.

Давайте посмотрим на пример:

См. Перо 3 # Example_OutSystems Experts - Выравнивание ячеек таблицы по вертикали Александра Сантоса (@alexandre_santos) на CodePen.

Почему это работает с макетом таблицы, а не с элементами div? Потому что, когда у вас есть таблица, строки имеют одинаковую высоту.Таким образом, когда содержимое ячейки не использует всю доступную высоту, браузер автоматически добавляет вертикальный отступ для центрирования содержимого.

Свойство позиции

Начнем с основ:

  • положение: статическое; - это значение по умолчанию. Элемент отображается в соответствии с порядком HTML.
  • позиция: абсолютная; - используется для определения точной позиции, в которой должен находиться элемент. Эта позиция всегда связана с ближайшим предком в относительной позиции (не статической).Знаете ли вы, что произойдет, если вы не определите точное положение элемента? Вы теряете над этим контроль! Он отображается случайным образом, полностью игнорируя документооборот. По умолчанию он отображается в верхнем левом углу.
  • позиция: относительная; - используется для позиционирования элемента относительно его нормального положения (статика). Эта позиция сохраняет порядок потока документа.
  • позиция: фиксированная; - используется для размещения элемента относительно окна браузера, чтобы он всегда был виден в области просмотра.

Примечание : Некоторые свойства, такие как top и z-index , работают, только если элемент имеет позицию (не статичную).

Давайте сделаем наши грязные руки еще грязнее!

Вы хотите выровнять рамку по центру страницы?

Сначала получите элемент с относительным положением и желаемыми размерами. Например: 100% ширины и высоты.

Второй шаг может отличаться в зависимости от ваших целевых браузеров, но вы можете использовать один из двух вариантов:

  • Вариант старой школы : Вам нужно знать точный размер коробки, чтобы удалить половину ширины и половину высоты коробки.Как это:

См. Перо 4 # Example_OutSystems Experts - Абсолютное позиционирование с рамкой размера от Александра Сантоса (@alexandre_santos) на CodePen.

  • Классная новая опция CSS3 : добавьте свойство преобразования со значением перевода -50%, и оно всегда будет центрировано. Как это:

См. Перо 5 # Example_OutSystems Experts - Абсолютное позиционирование без рамки от Александра Сантоса (@alexandre_santos) на CodePen.

В принципе, если вы хотите центрировать контент, никогда, (никогда, никогда, никогда!) Не используйте top: 40% или left: 300px .Это отлично работает на ваших тестовых экранах, но не по центру. Не совсем.

Помните фиксированное положение? Вы можете сделать то же самое, что и с абсолютным положением, но вам не нужно относительное положение в родительском элементе - оно всегда будет относительно окна браузера.

CSS Vertical Align Criers: вы слышали о Flexbox?

Вы можете использовать макет flexbox, вариант, о котором мой мальчик Динис писал некоторое время назад. Ах да, это намного лучше, чем любой из других доступных вариантов.С помощью flexbox манипулировать элементами по-разному - это детская игра. Даже Рикардо мог это сделать.

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

Вот пример того, как центрировать коробку по вертикали:

См. Pen 6 # Example_OutSystems Experts - Макет Flexbox без размера блока от Александра Сантоса (@alexandre_santos) на CodePen.

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

А как насчет CSS Grid?

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

При этом его можно использовать просто для центрирования элементов в контейнере! Вот пример того, как центрировать коробку по вертикали:

См. Перо CodePen Home 7 # Example_OutSystems Experts - Макет сетки без поля размера, автор Бернардо Кардосо (@BenCardoso) на CodePen.

Подобно Flexbox, этот подход также требует отказа от старых браузеров, хотя поддержка в основных из них совершенно стабильна.

Чтобы узнать больше о CSS Grid, ознакомьтесь с этим полным руководством и некоторыми практическими примерами.

Никаких разрывах вертикального выравнивания CSS

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

. . .

Некоторое время спустя я проходил мимо дома Рикардо, но его там не было. Кто-то сказал мне, что он заснул на одной из многих удобных кушеток нашей компании.

Похоже на технический нокаут.

Но когда я посмотрел на экран его ноутбука...

Какого черта он делал? Играть в игры, пока он должен был работать?

Это очень много цветов для понедельника, который начался таким серым.

Ссылки и дополнительная литература


Способ создания программного обеспечения меняется. Будьте на шаг впереди и присоединяйтесь к нам на конференции разработчиков OutSystems - это ваша возможность узнать о последних передовых технологиях OutSystems и о том, как они могут помочь вам построить больше и ускорить вашу карьеру.Узнайте больше и сэкономьте свое место прямо здесь!

CSS: центрирующие элементы

CSS: центрирующие элементы

См. Также указатель всех подсказок.

Центрирующие предметы

Распространенной задачей CSS является центрирование текста или изображений. По факту, существует три вида центрирования:

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

Центрирующие строки текста

Самый распространенный и (следовательно) самый простой тип центрирования - это строк текста в абзаце или заголовке.CSS имеет свойство text-align для этого:

П {выравнивание текста: центр}
h3 {text-align: center} 

отображает каждую строку в виде буквы P или h3 с центром между ее поля, например:

Все строки в этом абзаце по центру между полями абзаца благодаря значению 'center' свойства CSS 'text-align'.

Центрирование блока или изображения

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

P.blocktext {
    маржа слева: авто;
    маржа-право: авто;
    ширина: 8em
}
...

Это скорее ...

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

Это также способ центрировать изображение: превратить его в блок свой собственный и примените к нему свойства поля. Например:

IMG.displayed {
    дисплей: блок;
    маржа слева: авто;
    margin-right: auto}
...
... 

Следующее изображение отцентрировано:

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

CSS level 2 не имеет свойства для центрирования вещей вертикально. Вероятно, он будет на уровне CSS 3 (см. Ниже).Но даже в CSS2 вы можете центрировать блоки по вертикали, комбинируя несколько свойств. Хитрость заключается в том, чтобы указать, что внешний блок форматироваться как ячейка таблицы, потому что содержимое таблицы ячейку можно центрировать по вертикали .

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

DIV.container {
    мин-высота: 10em;
    дисплей: таблица-ячейка;
    вертикальное выравнивание: средний}
...

Этот небольшой абзац ...

Этот маленький абзац расположен по центру вертикально.

Вертикальное центрирование в CSS, уровень 3

CSS level 3 предлагает другие возможности. В это время (2014 г.) хороший способ центрировать блоки по вертикали без использования абсолютного позиционирование (которое может привести к наложению текста) все еще ниже обсуждение.Но если вы знаете, что перекрывающийся текст не будет проблема в вашем документе, вы можете использовать свойство 'transform', чтобы центрировать абсолютно позиционированный элемент. Например:

Этот абзац расположен по центру по вертикали.

Для документа, который выглядит так:

Этот абзац…

таблица стилей выглядит так:

div.container3 {
   высота: 10em;
     позиция: относительная } / * 1 * /
div.container3 p {
   маржа: 0;
     позиция: абсолютная;  / * 2 * /
     верх: 50%;  / * 3 * /
     преобразование: перевод (0, -50%) } / * 4 * / 

Основные правила:

  1. Сделайте контейнер относительно позиционированным, который объявляет, что это контейнер для абсолютно позиционированных элементов.
  2. Сделайте сам элемент абсолютно позиционированным.
  3. Поместите его наполовину в емкость с надписью «верх: 50%».(Примечание что 50% 'здесь означает 50% высоты контейнера.)
  4. Используйте перевод, чтобы переместить элемент вверх вдвое. высота. ('50% 'в' translate (0, -50%) 'обозначает высоту сам элемент.)

Недавно (примерно с 2015 г.) стала еще одна техника доступен в нескольких реализациях CSS. Он основан на новом Ключевое слово flex для свойства display. Это ключевое слово имеет в виду для использования в графических пользовательских интерфейсах (GUI), но вас ничто не останавливает от использования его в документе, если документ имеет правильная структура.

Этот абзац расположен по центру по вертикали.

таблица стилей выглядит так:

div.container5 {
  высота: 10em;
    дисплей: гибкий; 
    align-items: center }
div.container5 p {
  маржа: 0} 

Вертикальное и горизонтальное центрирование в CSS, уровень 3

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

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

Желтый фон показывает, что абзац на самом деле только настолько, насколько велико его содержание. Мы предполагаем ту же наценку, что и перед:

По центру!

Таблица стилей аналогична предыдущему примеру в отношении до вертикального центрирования.Но теперь мы переместим элемент наполовину по всему контейнеру, с 'left: 50%', и в то же время время переместите его влево на половину его собственной ширины в 'translate' трансформация:

div.container4 {
    высота: 10em;
    position: relative}
div.container4 p {
    маржа: 0;
    фон: желтый;
    позиция: абсолютная;
    верх: 50%;
      осталось: 50%; 
      поле справа: -50%; 
    преобразовать: перевести ( -50%,  -50%)} 

В следующем примере ниже объясняется, почему "margin-right: -50%" нужный.

Когда средство форматирования CSS поддерживает flex, это еще проще:

с этой таблицей стилей:

div.container6 {
  высота: 10em;
  дисплей: гибкий;
  align-items: center;
    justify-content: center }
div.container6 p {
  маржа: 0} 

, то есть единственное дополнение - это «justify-content: center». Просто как "align-items" определяет вертикальное выравнивание содержимого контейнера, 'justify-content' определяет горизонтальный выравнивание.(На самом деле это немного сложнее, так как их имена предлагаю, но в простом случае это работает именно так.) Побочный эффект из 'flex' заключается в том, что дочерний элемент, P в данном случае, является автоматически делается как можно меньше.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае браузера это означает окно браузера). Так центрировать элемент в области просмотра очень просто.Вот полный пример. (В этом примере используется синтаксис HTML5.)


  <стиль>
    тело {
        background: white}
    раздел {
        фон: черный;
        цвет белый;
        радиус границы: 1em;
        заполнение: 1em;
          позиция: абсолютная; 
          верх: 50%; 
          осталось: 50%; 
          поле справа: -50%; 
          преобразование: перевод (-50%, -50%) }
  
  <раздел>
    

Красиво по центру

Этот текстовый блок центрирован по вертикали.

И по горизонтали, если окно достаточно широкое.

Вы можете увидеть результат в отдельном документ.

Поле «margin-right: -50%» необходимо для компенсации «left: 50% ». Правило "влево" уменьшает доступную ширину элемента. на 50%. Таким образом, средство визуализации попытается создать строки, которые больше не чем на половину ширины контейнера. Сказав, что право маржа элемента дальше вправо на ту же величину, максимальная длина строки снова равна ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение состоит из одного линия, когда окно достаточно широкое. Только когда окно слишком узкий для всего предложения будет ли приговор разбит несколько строк. Когда вы удаляете 'margin-right: -50%' и изменяете размер снова окно, вы увидите, что предложения будут разбиты уже тогда, когда ширина окна в два раза превышает ширину текстовых строк.

(Использование 'translate' для центрирования в области просмотра было первым предложенный «Чарли» в ответе на переполнение стека.)

CSS Align - TutorialBrain

На главную »CSS» CSS Выровнять

Выравнивание CSS - это способ выравнивания элементов HTML.

По сути, это способ организации элементов. Важные выравнивания:

  • CSS Text align
  • CSS Vertical Align
  • CSS image align
  • CSS align div
  • CSS Table align
  • CSS float align

Есть 3 важных способа выровнять текст.

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

Синтаксис выравнивания текста:
выравнивание текста : слева ;
выравнивание текста : центр ;
выравнивание текста : вправо ;
выравнивание текста : выравнивание ;

 # text-align-left {
  выравнивание текста: слева;
  фон: цвет морской волны;
  красный цвет;
}

# text-align-center {
  выравнивание текста: центр;
  фон: желтый;
  цвет синий;
}

# text-align-right {
  выравнивание текста: вправо;
  фон: розовый;
  цвет: зеленый;
}
 

CSS выровнять по центру с использованием полей и ширины

Теперь, как еще можно выровнять div по центру по горизонтали?

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

Поле margin: auto используется вдоль свойства width для выравнивания элемента, такого как div (или контейнер).

margin: auto автоматически добавляет соответствующие поля, в то время как свойство width дает фиксированную ширину для div, чтобы div не расширялся.

Теперь, как еще можно выровнять div по центру по горизонтали?

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

Поле margin: auto используется вдоль свойства width для выравнивания элемента, такого как div (или контейнер).

margin: auto автоматически добавляет соответствующие поля, в то время как свойство width дает фиксированную ширину для div, чтобы div не расширялся.

Примечание / информация:

Если вы хотите выровнять div по центру, то одним из способов добиться этого является кодирование margin: auto вместе с ненулевым значением width: x (all действующие единицы) .

Ширина должна быть больше 0% и меньше 100%

 .margin-auto {
  маржа: авто;
  ширина: 45%;
  цвет фона: черный;
  цвет: желтый;
}
 

В CSS. Один из самых популярных способов выровнять изображение по центру - выполнить следующие 2 шага:

  1. Установите автоматическое поле с помощью поля : auto . Если вы хотите выровнять только по горизонтали по центру, установите margin-left: auto & ma rgin-right: auto.
  2. Разрешить элементу изображения начинаться с новой строки и занимать всю ширину. Это устанавливается с помощью дисплея : блок
 # margin-block {
  фон: фиолетовый;
  маржа: авто;
  дисплей: блок;
  ширина: 50%;
  высота: 60%;
}
 

CSS Text vertical-align устанавливает вертикальное расположение текста.

Синтаксис CSS Вертикальное выравнивание текста:

vertical-align: length; / * Здесь длина - это все применимые единицы измерения * /
vertical-align: baseline; / * Устанавливает элемент на основе управления родительским элементом * /
vertical -align: x%; / * x может быть положительным или отрицательным * /
/ * Если x> 0, текст упорядочивает себя на x% вверх
Если x <0, текст упорядочивает себя на x% вниз * /
vertical-align: middle; / * выравнивается по вертикали по направлению к середине родительского элемента * /
vertical-align: sub; / * выравнивает по вертикали как нижний индекс родительского элемента * /
vertical-align: super; / * выравнивается по вертикали как верхний индекс родительского элемента * /
vertical-align: bottom; / * для выравнивания текста внизу.Чаще всего используется в таблицах * /
Другой менее используемый синтаксис: :
vertical-align: top;
выравнивание по вертикали: верхний текст;
выравнивание по вертикали: нижний текст;

 #vertical_align_length {
  вертикальное выравнивание: 30 пикселей;
}

#vertical_align_baseline {
  вертикальное выравнивание: базовая линия;
}

# vertical_align_percent1 {
  вертикальное выравнивание: 30%;
}

# vertical_align_percent2 {
  вертикальное выравнивание: -40%;
}

#vertical_align_middle {
  вертикальное выравнивание: по центру;
}

#vertical_align_sub {
  вертикальное выравнивание: суб;
}

#vertical_align_super {
  вертикальное выравнивание: супер;
}
 

В предыдущем примере мы видели вертикальное выравнивание текстов в абзаце.

Точно так же есть способы вертикального выравнивания в div. Часто от нас требуется выровнять текст по вертикали по центру div. Давайте посмотрим, как это сделать -

 а) выравнивание по вертикали: по центру;
 

Выравнивает текст по вертикали по центру. В предыдущем примере один из абзацев также использует свойство vertical-align: middle . Это работает даже для изображений, так что вы можете попробовать установить этот стиль и для своего тега «img».

Примечание / информация:
Если вы хотите центрировать текст на изображении, вы можете закодировать с выравниванием по вертикали , а также line-height . Высота строки должна быть на больше или равна высоте изображения.

Это позволит выровнять одну строку текста по вертикали по центру.

Обычно это будет работать лучше, если вы установите высоту строки больше, чем размер шрифта текста, или высоту строки, равную высоте контейнера div.

  • Еще один момент, на который следует обратить внимание: этот процесс может не работать, если у вас более 1 строки текста.
  • Мы не рекомендуем использовать этот метод для центрирования текста на изображении, так как это усложнит вашу задачу.

Пример использования line-height для вертикального центрирования

 # parent-height {
  фон: розовый;
  высота: 150 пикселей;
  ширина: 400 пикселей;
  выравнивание текста: центр;
}

# child-line-height {
  высота строки: 150 пикселей;
}
 
 c)  Родительский div :
   дисплей: таблица;

     Детский div :
   дисплей: таблица-ячейка;
   вертикальное выравнивание: по центру;
 

Это работает, когда у вас есть родительский div и с этим родительским div связан дочерний div.

Итак, вы должны определить родительский div с display: table . Кроме того, вы должны закодировать дочерний div с помощью - display: table-cell & vertical-align: middle вместе.

Это один из наиболее эффективных способов выравнивания текста в div, который также имеет дочерний div.

Выровнять по вертикали, используя отступы с выравниванием текста

Другой способ выровнять элемент по вертикали (или даже по горизонтали) - использовать свойство padding с text-align.

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

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

 .v-align-padding {
  отступ: 20 пикселей 0;
  выравнивание текста: центр;
  граница: сплошной синий цвет 3px;
}

.h-align-padding {
  отступ: 0px 50px;
  выравнивание текста: центр;
  граница: сплошной розовый 3px;
}

.h-v-align-padding {
  отступ: 22px 50px;
  выравнивание текста: центр;
  граница: 3 пикселя сплошного желтого цвета;
}
 

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

  • CSS Position property
  • CSS float

CSS выровнять по левому краю с использованием свойства позиции

В начале этой страницы мы увидели, как выровнять текст по левому краю с помощью свойства text-align: left .

Таким же образом мы можем выровнять изображение по правому краю, таблицу вправо, согнуть вправо или div с помощью свойства position: absolute и установить свойства left или right для выравнивания по левой или правой стороне по горизонтали. .

CSS выровнять по правому краю, используя свойство position

мы можем использовать свойство position: absolute и установить свойства left или right для выравнивания по левой или правой стороне по горизонтали.

TutorialBrain не рекомендует использовать position: absolute для выравнивания по левому или правому краю, так как это может привести к перекрытию элементов .

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

 .absolute-right {
  позиция: абсолютная;
  вправо: 0 пикселей;
  ширина: 45%;
  фон: # 25e1a5;
}

.absolute-left {
  позиция: абсолютная;
  слева: 0px;
  ширина: 45%;
  фон: # ef1cd0;
}
 

Выровнять по левому и правому краю с помощью поплавка

Свойство CSS float управляет плавным перемещением элементов.

  1. float: left - Чтобы переместить элемент (например, div) влево.
  2. float: right - Чтобы перемещать элемент (например, div) вправо.
 .val1 {
плыть налево;
цвет фона: Темно-бирюзовый;
отступ: 30 пикселей;
}
.val2 {
float: right;
цвет фона: оранжевый;
отступ: 30 пикселей;
}
 

Интервью Вопросы и ответы CSS

Text-align:
В CSS свойство text-align используется для выравнивания текста по левому, правому краю, по центру или для выравнивания по центру текста, предоставляя равное пространство слева и справа.
Синтаксис :

  • выравнивание текста: слева;
  • выравнивание текста: по правому краю;
  • выравнивание текста: по центру;
  • выравнивание текста: выравнивание;

Свойство Vertical-align
vertical-align: middle;

CSS Text vertical-align устанавливает вертикальное расположение текста.

Чтобы выровнять изображение по центру, мы можем использовать эти два метода:

Установите автоматическое поле с помощью параметра margin: auto. Если вы хотите выровнять только по центру по горизонтали, установите margin-left: auto и margin-right: auto.

OR

Разрешить элементу изображения начинаться с новой строки и занимать всю ширину. Это устанавливается с помощью display: block.

Мы можем выровнять текст по левому, правому краю, по центру и по ширине, используя свойство CSS Align
align: left; - выровнять по левому краю.
выровнять: по центру; - выровнять по центру.
выровнять: вправо; - выровнять по правому краю.
выровнять: по ширине; - растянуть все линии одинаково.

Как выровнять текст с помощью CSS

Выровнять текст в CSS можно с помощью свойства text-align или свойства vertical-align .

  1. Свойство text-align используется для указания того, как встроенный контент должен быть выровнен внутри блока. Например:
      
    Значения:
  2. Свойство vertical-align используется для указания того, как встроенный контент должен быть выровнен по вертикали относительно одноуровневого встроенного содержимого. Например:
      style = "vertical-align: text-bottom;  
    Значения:
    • нижний
    • средний
    • верхний
    • нижний текст
    • базовая линия
    • верхний текст
    • нижний
    • супер
    • 9 900 В примере кода показаны эти свойства в использовании:

        
      
      
      
       Выровнять текст 
      
      
      

      Выровнять текст

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

      выравнивание текста: слева
      выравнивание текста: по центру
      выравнивание текста: вправо
      text-align: justify - чтобы увидеть эффект выравнивания, текстовый блок должен быть обернут text-align: justify - чтобы увидеть эффект выравнивания, текстовый блок должен быть обернут text-align: justify - чтобы увидеть эффект выравнивания, текстовый блок должен быть обернут

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

      блок вертикальное выравнивание: снизу
      блок вертикальное выравнивание: средний
      блок вертикальное выравнивание: сверху
      блок вертикальное выравнивание: нижний текст
      блок вертикальное выравнивание: базовая линия
      блок вертикальное выравнивание: верхний текст
      вертикальное выравнивание: sub
      вертикальное выравнивание: супер

Приведенный выше код отобразит следующее:

Центрирование CSS (текст и изображения) с помощью Angular 11 Пример

В этом руководстве мы узнаем, как центрировать элементы в CSS и Angular 7/8 используя современный макет Flexbox.

Мы увидим, как центрировать изображения в CSS по вертикали и горизонтали с помощью Flexbox и как центрировать изображения внутри гибких контейнеров div, а затем как настроить это на всю HTML-страницу с помощью единиц области просмотра.

Далее мы узнаем, как центрировать текст в CSS по горизонтали и вертикали с помощью Flexbox.

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

Но с появлением Flexbox центрирование CSS стало проще и понятнее, чем когда-либо.

Мы будем использовать Stackblitz для нашего проекта Angular.

Горизонтальное центрирование

Начнем с горизонтального центрирования.Откройте файл src / app / app.component.html и добавьте следующий

:

  

Привет, Angular 8!

Мы добавляем div с классом center . Внутри него мы добавляем тег

.

Затем откройте файл src / app / app.component.css и добавьте класс center со следующими стилями:

  .center {
  дисплей: гибкий;
  justify-content: center;
}
  

Вот и все.наше содержимое центрируется по горизонтали, просто делая div гибким контейнером и используя свойство justify-content . Вот скриншот:

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

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

Этого также легко добиться с помощью Flexbox, просто добавив align-items: center .

Давайте сначала добавим следующие стили, чтобы изменить цвет и высоту содержащего div , чтобы мы могли видеть содержимое, четко центрированное по вертикали:

 .center {
  дисплей: гибкий;
  высота: 300 пикселей;
  цвет фона: # ff1124;
  justify-content: center;
}
  

Это результат:

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

  .center {
  дисплей: гибкий;
  высота: 300 пикселей;
  цвет фона: # ff1124;
  justify-content: center;
  align-items: center;
}
  

Это результат:

Это будет центрировать все элементы внутри div . Если вы хотите центрировать определенные элементы, вы можете вместо этого использовать align-self: center на элементе.

  .center {
  дисплей: гибкий;
  высота: 300 пикселей;
  цвет фона: # ff1124;
  justify-content: center;
}

.center h2 {
  align-self: center;
}
  

Если вам нужно центрировать всю страницу, вы можете просто задать div той же высоты, что и страница:

  .center {
  дисплей: гибкий;
  цвет фона: # ff1124;
  justify-content: center;
  высота: 100вх;
}


.center h2 {
  align-self: center;
}
  

Это снимок экрана:

Центрировать текст в CSS по горизонтали и вертикали с помощью Flexbox

В этом разделе мы узнаем, как центрировать текст в CSS по горизонтали и вертикали с помощью Flexbox.

HTML имеет тег

для центрирования текста, но вы также можете использовать свойство text-align CSS со значением center для центрирования текста по горизонтали.

Для вертикального центрирования текста в CSS у нас есть старые и новые способы. Например, вы можете установить высоту строки вашего текста на ту же высоту, что и контейнер текста, или, еще лучше, использовать Flexbox, просто установив для свойств justify-content и align-items значение center .

Это то, что мы рассмотрим в этой статье:

  • Центрирование текста без CSS с помощью тега
    ,
  • Центрирование текста с помощью CSS.
  • Центрирование текста по горизонтали с помощью свойства text-align .
  • Вертикальное центрирование текста с помощью Flexbox.

Центрирование текста по горизонтали без CSS с использованием тега

Для центрирования заключенного текста можно использовать тег

.Это быстрый пример:

  
Этот текст будет центрирован!

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

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

Центрирование текста по горизонтали с помощью CSS

Вы можете очень легко центрировать текст в CSS, используя свойство text-align со свойством center .

Для одного текстового элемента, который вы хотите центрировать на своей странице, вы можете использовать свойство style со свойством text-align следующим образом:

  

Этот текст будет центрирован!

Мы просто устанавливаем значение text-align на center .

Использование класса CSS для центрирования текста по горизонтали

В случае, если вам нужно центрировать несколько текстовых элементов, лучше использовать класс CSS вместо повторения одного и того же кода центрирования текста CSS для нескольких элементов в вашем HTML-документе.Например:

  <стиль>
.centered-text {
 выравнивание текста: центр
}

  

Затем вы можете применить класс .centered-text к текстовому элементу, чтобы центрировать его следующим образом:

  

Этот текст центрирован!

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

элементах вашего HTML-документа:

  
  

Итак, как мы видели, горизонтальное выравнивание текста в CSS довольно просто.Вам просто нужно добавить свойство style и установить text-align на center или также с помощью класса или селектора CSS.

Центрирование текста в CSS по вертикали с использованием высоты строки

Еще более пугающим является центрирование текста по вертикали.

Для этого существуют старые и новые методы CSS.

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

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

Но если у вас более одной строки текста, предыдущий трюк не сработает, если мы хотим центрировать их по вертикали. К счастью для нас, существует современный подход, использующий макет CSS Flexbox.

Возьмем этот пример:

  

Центрировать текст

С Flexbox

  .container h2, .container h3 {
  выравнивание текста: центр;
}

.container {
  высота: 500 пикселей;
  дисплей: гибкий;
  justify-content: center;
  align-items: center;
}
  

Мы просто устанавливаем свойство display на flex , а затем устанавливаем свойства justify-content и align-items на center .

Центрирование изображений по горизонтали и вертикали в CSS с помощью Flexbox

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

Мы увидим, как центрировать изображения внутри гибких контейнеров div, а затем как настроить это на всю HTML-страницу с помощью единиц просмотра.

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

Благодаря Flexbox центрирование CSS стало проще, чем раньше, и проще.
Мы покажем вам, как центрировать изображения в CSS на примере с помощью Flexbox.

Горизонтальное центрирование CSS

Давайте посмотрим, как центрировать div по горизонтали с изображением. Нам просто нужно использовать свойство justify-content и установить значение center на гибком контейнере.

Это пример HTML-кода с элементом div , который содержит изображение:

  

Чтобы центрировать изображение внутри контейнера div, нам просто нужно сделать контейнер гибким блоком и использовать justify-content со значением center :

  .image-container {
  дисплей: гибкий;
  justify-content: center;
}
  

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

Вертикальное центрирование CSS

Что действительно сложнее всего, так это вертикальное центрирование, но благодаря Flexbox центрировать элементы по вертикали намного проще.

Возьмем тот же пример HTML с изображением внутри контейнера div:

  

Это код CSS для центрирования изображения внутри div по вертикали:

  .image-container {
  дисплей: гибкий;
  // justify-content: center;
  align-items: center;
}
  

Мы просто используем свойство align-items со значением center для центрирования изображения по вертикали внутри контейнера div, который должен быть гибким блоком.

Вы также можете применить свойство align-self со значением center к самому элементу изображения, чтобы центрировать его по вертикали внутри гибкого контейнера. Это более полезно, если у вас несколько элементов и вы хотите центрировать один из них:

  .image-container img {
  align-self: center;
}
  

Мы видели, как центрировать изображения по горизонтали и вертикали внутри контейнера div, но что, если вам нужно центрировать его на всей странице HTML?

Поскольку Flexbox должен знать высоту контейнера для выравнивания элементов, нам просто нужно установить высоту div как высоту страницы, что может быть достигнуто с помощью единиц области просмотра, где 100vh равно 100% высоты область просмотра.

  корпус {
  маржа: 0;
}
.image-container {
    дисплей: гибкий;
    высота: 100вх;
    justify-content: center;
    align-items: center;
}
  

Заключение

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

Этот пример был продемонстрирован с проектом Angular 8, но эти приемы никак не связаны с Angular.

Мы видели, как центрировать текст по горизонтали, используя свойство text-align со значением center .

Для вертикального центрирования текста в CSS мы использовали как старый, так и новый способ. Например, установка высоты строки текста, которая будет центрирована на ту же высоту, что и контейнер текста, или использование Flexbox, просто установив для свойств justify-content и align-items значение center .

Мы также видели, как центрировать изображения внутри контейнера div по горизонтали и вертикали, используя свойства Flexbox, такие как justify-content и align-items и устанавливая их значения на center .Мы также видели, как центрировать изображение на примере на всей странице, просто сделав высоту div равной высоте страницы с использованием единиц просмотра, где 100vh равно 100% высоты области просмотра.


Как центрировать тег div в CSS - горизонтальное и вертикальное выравнивание | Автор: Do Dung

Центрирование тега div в css

Если вы программист и знакомы с CSS, вы должны знать очень простую технику, которая заключается в том, как центрировать div в CSS?

Выравнивание по центру div или любого тега в CSS часто делают при написании кода HTML и CSS.В этой статье я покажу вам 6 способов центрировать div в CSS . Я использую тег div только для примера, вы можете применить это решение для тех же тегов.

Объясните некоторые правила по телефону:

  • Родительский тег: Этот родительский тег содержит центр потребности в тегах.
  • Дочерний тег: тег необходимо выровнять по центру.

1. Использование text-align: center

Чтобы использовать text-align: center, нам нужно заметить следующее:

  • Родительский тег должен быть тегом блока и должен устанавливать свойство ширины.
  • Родительский тег должен установить text-align: center CSS. Это свойство поможет сопоставить дочерние теги центра с шириной этого тега.
  • Дочерний тег не может установить свойство CSS с плавающей точкой слева или справа и должен иметь ширину, ширина должна быть меньше родительского тега.
  • Важный дочерний тег должен быть тегом inline-block (set display: inline-block;)

Вы можете обратиться к приведенному ниже коду, чтобы понять, как центрировать тег div в CSS с помощью text-align: center

HtmlCss

И результат ниже:

* Примечание: это решение центрирует только по горизонтали, а не по вертикали дочерние теги div.Вы также можете центрировать изображение.

Здесь вы можете увидеть простую демонстрацию.

2. Использование автоматического поля.

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

Хорошо, теперь я объясню и сделаю для вас пример, во-первых, это правило кода:

  • Для родительского тега необходимо четко указать ширину.
  • Для дочернего тега необходимо установить значение поля слева и справа на авто.
  • Дочерний тег не может устанавливать плавающее положение влево или вправо.
HtmlCss

margin: 10px auto : это означает, что установлено верхнее поле 10px, right auto, bottom 10px и left auto.

И результат ниже:

* Примечание: это решение центрируется только по горизонтали.

Здесь вы можете увидеть простую демонстрацию.

3. Использование абсолютного положения.

С помощью позиции вы можете выровнять по центру тега div как по горизонтали, так и по вертикали или только по одному из двух размеров, решать вам.

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

  • Родительский тег должен иметь четкую ширину.
  • Родительский тег должен установить относительное положение.
  • Дочерний тег должен установить абсолютное положение.
  • Дочерний тег установил верхнее, левое, правое и нижнее значение равным 0. [обязательно]
  • Для дочернего тега необходимо установить поле автоматически с четырьмя измерениями.
Css

И результат ниже:

* Примечание. В приведенном выше примере я выравниваю центр как по горизонтали, так и по вертикали.Поэтому, если вы выравниваете центр только по горизонтали, вы меняете только margin с auto на margin: 0 auto. То же самое, если вы хотите выровнять только центр по вертикали set margin: auto 0;

Здесь вы можете увидеть простую демонстрацию.

4. Использование гибкости отображения в CSS.

Гибкий дисплей - это новое свойство, предоставляемое CSS3. Это определяет гибкий контейнер; встроенный или блочный в зависимости от заданного значения. Он включает гибкий контекст для всех его прямых потомков.

HtmlCss

И вот результат:

Здесь вы можете увидеть простую демонстрацию.

В этом примере я выравниваю центр по горизонтали и вертикали.

Если вы хотите выровнять только по центру по горизонтали:
- Измените значение align-items на flex-start для центрирования по горизонтали сверху.
- Измените значение align-items на flex-end по центру по горизонтали внизу.

Напротив, если вы хотите выровнять только по центру по вертикали:
- Измените значение justify-content на flex-start, чтобы центрировать по вертикали влево.
- Измените значение justify-content на flex-end до центра по вертикали вправо.

5. Метод Transform / Translate.

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

Примечание. Не забывайте, что свойство transform относится к CSS 3. Оно не поддерживает версию старого браузера.

Правило:
- Родительский тег устанавливается только с помощью & height.
- Дочерний тег установил относительное положение. Это помогает дочернему тегу отображаться только внутри родительского поля.
- Дочерний тег установил для свойств верхнее и левое значение 50%. Это помогает переместить дочерний блок в середину родительского блока;
- Дочерний тег должен установить преобразование с помощью translateY () и translateX () на -50%; Это помогает вернуться влево и вправо назад -50% ширины дочернего тега.

HtmlCss

И вот результат:

Здесь вы можете увидеть простую демонстрацию.

* Примечание. Если вы хотите выровнять только по центру по вертикали:
- Удалить свойство слева: 50%.
- Удалить значение translateX (-50%) для свойства преобразования.

Напротив, если вы хотите, если вы хотите выровнять только центр по горизонтали:
- Удалить свойство top: 50%.

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

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