У меня есть элемент div, который содержит текст, и я хочу выровнять содержимое этого div по вертикали.
Вот мой стиль див
& Лт;!- начать фрагмент: js скрыть: false - >
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
& Лт;!- конец фрагмента - >
Какой лучший способ сделать это?
Вы можете попробовать этот базовый подход:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
& Лт;!- конец фрагмента - >
Хотя он работает только для одной строки текста, потому что мы устанавливаем высоту строки на ту же высоту, что и элемент, содержащий поле.
Это еще один способ выравнивания текста по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но все еще требует контейнера с фиксированной высотой:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
& Лт;!- конец фрагмента - >
CSS просто оценивает < div >
, вертикальный центр выравнивает< span >
, устанавливая высоту линии < div >
, равную ее высоте, и делает< span >
встроенный блок с vertical-align: middle
. Затем он устанавливает высоту линии обратно в норму для < span >
, поэтому его содержимое будет естественным образом течь внутри блока.
И вот еще один вариант, который может не работать на старых браузерах, которые не поддерживают display: table
и display: table-cell
(в основном это просто Internet Explorer 7). Используя CSS, мы моделируем поведение таблицы (поскольку таблицы поддерживают вертикальное выравнивание), и HTML такой же, как во втором примере:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
& Лт;!- конец фрагмента - >
Этот метод использует абсолютно расположенную настройку элемента сверху, снизу, слева и справа на 0. Это более подробно описано в статье в журнале Smashing Magazine, Абсолютное горизонтальное и вертикальное центрирование в CSS .
Другой способ (еще не упомянутый здесь) - с Flexbox.
Просто добавьте следующий код в элемент container :
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
& Лт;!- начать фрагмент: js скрыть: true - >
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
<div class="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>
& Лт;!- конец фрагмента - >
В качестве альтернативы, вместо выравнивания содержимого через container , flexbox также может центрировать элемент flex с помощью автоматического поля , когда в гибком контейнере есть только один элемент flex (например, пример приведен в вопросе выше).
Поэтому, чтобы центрировать элемент изгиба как по горизонтали, так и по вертикали, просто установите его с помощью margin: auto
& Лт;!- начать фрагмент: js скрыть: true - >
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 24px;
font-style: oblique;
color: #FFF;
text-align: center;
padding: 0 20px;
margin: 20px;
display: flex;
}
.box span {
margin: auto;
}
<div class="box">
<span>margin:auto on a flex item centers it both horizontally and vertically</span>
</div>
& Лт;!- конец фрагмента - >
NB: Все вышеперечисленное относится к центрирующим элементам при их укладке в горизонтальные ряды . Это также поведение по умолчанию, поскольку по умолчанию значение для flex-direction
равно row
. Если, однако гибкие элементы должны быть изложены в вертикальных столбцах , затем flex-direction: столбец
должен быть установлен на контейнере, чтобы установить основную ось в качестве столбца, и дополнительно свойства justify-content
и align-items
теперь работают наоборот с justify- content: центр
центрирование по вертикали иalign-items: центр
центрирование по горизонтали)
flex-направление: столбец
демо][5]& Лт;!- начать фрагмент: js скрыть: true - >
.box {
height: 150px;
width: 400px;
background: #000;
font-size: 18px;
font-style: oblique;
color: #FFF;
display: flex;
flex-direction: column;
justify-content: center;
/* vertically aligns items */
align-items: center;
/* horizontally aligns items */
}
p {
margin: 5px;
}
<div class="box">
<p>
When flex-direction is column...
</p>
<p>
"justify-content: center" - vertically aligns
</p>
<p>
"align-items: center" - horizontally aligns
</p>
</div>
& Лт;!- конец фрагмента - >
Хорошее место для начала с Flexbox, чтобы увидеть некоторые из его функций и получить синтаксис для максимальной поддержки браузера, - это flexyboxes
Кроме того, поддержка браузера в настоящее время очень хорошая: caniuse
Для совместимости между браузерами для display: flex
и align-items
вы можете использовать следующее:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
Вы можете легко сделать это, добавив следующую часть кода CSS:
display: table-cell;
vertical-align: middle;
Это означает, что ваш CSS наконец выглядит как:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
& Лт;!- конец фрагмента - >
Для справки и добавления более простого ответа:
Чистый CSS:
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Или как миксин SASS / SCSS:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Используйте по:
.class-to-center {
@include vertical-align;
}
Автор сообщения в блоге Себастьяна Экстра & # 246; m Вертикальное выравнивание всего с 3 строками CSS :
Этот метод может привести к размытости элементов из-за размещения элемента на «полупикселе». Решение для этого состоит в том, чтобы установить его родительский элемент в save-3d. Нравится следующее:
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Мы живем в 2015 году и Flex Box поддерживается каждым крупным современным браузером.
Это будет способ создания сайтов с этого момента.
Узнай это!
Вся заслуга принадлежит владельцу этой ссылки @Sebastian Ekstr & # 246; m Ссылка; пожалуйста, пройти через это. Смотрите это в действии кодепен. Прочитав вышеприведенную статью, я также создал [демонстрационную скрипку][3].
Всего с тремя линиями CSS (исключая префиксы поставщиков) мы можем сделать это с помощью преобразования: translateY вертикально центрирует все, что мы хотим, даже если мы не знаем его высоту.
Преобразование свойств CSS обычно используется для вращающихся и масштабирующих элементов, но с его функцией translateY мы теперь можем выравнивать элементы по вертикали. Обычно это должно быть сделано с абсолютным позиционированием или установкой высоты строки, но это требует от вас либо знать высоту элемента, либо работать только с однострочным текстом и т. Д.
Итак, для этого мы пишем:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Это все, что вам нужно. Это метод, аналогичный методу абсолютного положения, но с положительным моментом, что нам не нужно устанавливать высоту элемента или свойства положения на родителе. Он работает прямо из коробки, даже в Internet & nbsp; Explorer & nbsp; 9!
Чтобы сделать его еще проще, мы можем написать его как миксин с его префиксами поставщика.
Flexbox, которые были введены в CSS3, являются решением:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
/* Important */
section {
display: flex;
display: -webkit-flex;
}
p {
/* Key Part */
margin: auto;
}
/* Unimportant, coloring and UI */
section {
height: 200px;
width: 50%;
margin: auto;
border-radius: 20px;
border: 3px solid orange;
background-color: gold;
}
p {
text-align: center;
font-family: Calibri;
background-color: yellow;
border-radius: 20px;
padding: 15px;
}
<section>
<p>
I'm a centered box!<br/>
Flexboxes are great!
</p>
</section>
& Лт;!- конец фрагмента - >
Совет : замените строку выше, которая помечена как «Часть ключа», одной из этих строк, если вы хотите центрировать текст:
margin: auto 0;
margin: 0 auto;
Как я заметил, этот трюк работает с сетками (т.е. display: grid
), также.
Гибкий подход
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
div {
width: 250px;
min-height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #123456;
margin-bottom: 5px;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet.</span>
</div>
<div>
& Лт;!- конец фрагмента - >
Решение, принятое в качестве ответа, идеально подходит для использования line-height
так же, как высота div, но это решение не работает идеально, когда текст обернут ИЛИ состоит из двух строк.
Попробуйте этот, если текст обернут или находится на нескольких строках внутри div.
#box
{
display: table-cell;
vertical-align: middle;
}
Для получения дополнительной информации см .:
Попробуйте это решение:
& Лт;!- начать фрагмент: js скрыть: false - >
& Лт;!- язык: lang-css - >
.EXTENDER { позиция: абсолютная; верх: 0px; слева: 0px; дно: 0px; справа: 0px; ширина: 100%; высота: 100%; переполнение: скрыто; перелив-х: скрытый; }
.PADDER-CENTER {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<div class="EXTENDER">
<div class="PADDER-CENTER">
<div contentEditable="true">Edit this text...</div>
</div>
</div>
& Лт;!- конец фрагмента - >
Создан с использованием CSS +.
Вы можете использовать следующий фрагмент кода в качестве ссылки. Это работает как шарм для меня
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
<!DOCTYPE html>
<html lang="de">
<head>
<title>Vertically Center Text</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
body {
display: table;
}
.centered-text {
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body style="background:#3cedd5">
<div class="centered-text">
<h1>Yes, it's my landing page</h1>
<h2>Under construction, coming soon!!!</h2>
</div>
</body>
</html>
& Лт;!- конец фрагмента - >
Вывод вышеприведенного фрагмента кода выглядит следующим образом:
Другой способ:
Не устанавливайте < код > height < / код > атрибут div < / code >, но вместо этого используйте
padding: < / code > добиться эффекта. Подобно высоте строки, она работает, только если у вас есть одна строка текста. Хотя таким образом, если у вас больше контента, текст все равно будет центрирован, но сам div будет немного больше.
Так что вместо того, чтобы идти с:
div {
height: 120px;
line-height: 120px;
}
Вы можете сказать:
div {
padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}
Это установит верхнюю и нижнюю padding
div
в 60px
, а левую и правую padding
в ноль, сделав div
120 пикселей (плюс высота вашего шрифта) высоко, и размещение текста по вертикали по центру в div.
Вот еще один вариант, использующий flexbox.
<div id="container">
<div class="child">
<span
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
nemo.</span
>
</div>
</div>
#container {
display: flex;
}
.child {
margin: auto;
}
Я не уверен, что кто-то пошел по маршруту «режим письма», но я думаю, что он решает проблему чисто и имеет широкую поддержку :
& Лт;!- начать фрагмент: js hide: ложная консоль: ложная павиана: ложная - >
<div class="vertical">
<div class="horizontal">
<div class="content">
I'm centered in the vertical and horizontal thing
</div>
</div>
</div>
.vertical {
//border: 1px solid green;
writing-mode: vertical-lr;
text-align: center;
height: 100%;
width: 100%;
}
.horizontal {
//border: 1px solid blue;
display: inline-block;
writing-mode: horizontal-tb;
width: 100%;
text-align: center;
}
.content {
text-align: left;
display: inline-block;
border: 1px solid #e0e0e0;
padding: .5em 1em;
border-radius: 1em;
}
& Лт;!- конец фрагмента - >
Это, конечно, будет работать с любыми нужными вам измерениями (кроме 100% родителей). Если вы раскусите границы, вам будет полезно ознакомиться с самим собой.
[JSFiddle demo][1] для вас, чтобы возиться.
Поддержка использования: 85,22% + 6,26% = 91,48% (даже Интернет и NBSP; Исследователь находится в!)
Еще лучшая идея для этого. Вы тоже можете так поступить
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
body,
html {
height: 100%;
}
.parent {
white-space: nowrap;
height: 100%;
text-align: center;
}
.parent:after {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
.centered {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
<div class="parent">
<div class="centered">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
& Лт;!- конец фрагмента - >
Для всех ваших потребностей вертикального выравнивания!
Объявите этот миксин:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Затем включите его в свой элемент:
.element{
@include vertical-align();
}
Для одной строки текста (или одного символа) вы можете использовать эту технику:
Он может использоваться, когда # box
имеет нефиксированную, относительную высоту в% .
< div id = "box" > < / div >
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Смотрите живую демонстрацию [на JsBin][1] (легче редактировать CSS) или [JsFiddle][2] (легче изменить высоту рамки результатов).
Если вы хотите разместить внутренний текст в HTML, а не в CSS, вам нужно обернуть текстовое содержимое в дополнительный элемент inline и отредактировать # box :: after
, чтобы соответствовать ему. (И, конечно же, свойство content:
должно быть удалено.)
Например,
< div id = "box" > < span > TextContent < / span > < / div >
.
В этом случае #box :: after
следует заменить на # box span
.
Для поддержки Internet & nbsp; Explorer & nbsp; 8 вы должны заменить ::
на :
.
[1]: http://jsbin.com/ipujIyeM/2/edit?html, css, output
Попробуйте свойство преобразования:
& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >
#box {
height: 90px;
width: 270px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
& Лт;!- конец фрагмента - >
Простой и универсальный способ (как у Michielvoo's настольный подход):
[ctrv]{
display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
display: table-cell;
vertical-align: middle;
// text-align: center; /* optional */
}
Использование этого атрибута (или эквивалентного класса) в родительском теге работает даже для многих детей, чтобы выровнять:
<parent ctrv> <ch1/> <ch2/> </parent>
Очень простой & Самое мощное решение для вертикального выравнивания центра:
& Лт;!- начать фрагмент: js скрыть: false - >
.outer-div {
height: 200px;
width: 200px;
text-align: center;
border: 1px solid #000;
}
.inner {
position: relative;
top: 50%;
transform: translateY(-50%);
color: red;
}
<div class="outer-div">
<span class="inner">No data available</span>
</div>
& Лт;!- конец фрагмента - >