Как я могу вертикально центрировать текст с помощью CSS?
у меня есть элемент div, который содержит текст, и я хочу выровнять содержимое этого div по вертикали.
вот мой стиль div:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
каков наилучший способ сделать это?
30 ответов
вы можете попробовать этот базовый подход:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
он работает только для одной строки текста, потому что мы устанавливаем высоту строки на ту же высоту, что и содержащий элемент box.
более универсальный подход
это еще один способ выравнивания текста по вертикали. Это решение будет работать для одной строки и нескольких строк текста, но по-прежнему требует фиксированной высоты контейнер:
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>
'S line-высота, равная его высоте, и делает <span>
встроенный блок с vertical-align: middle
. Затем он устанавливает высоту линии обратно в нормальное для <span>
, поэтому его содержимое будет течь естественно внутри блока.
имитация отображения таблицы
и вот еще один вариант, который может не работа на старых - браузеры, которые не поддерживают display: table
и display: table-cell
(в основном просто Internet Explorer 7). Используя CSS, мы моделируем поведение таблицы (поскольку таблицы поддерживают вертикальное выравнивание), а HTML совпадает со вторым примером:
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. Это описано в more подробно в статье в журнале Smashing,абсолютное горизонтальное и вертикальное центрирование в CSS.
другой способ (еще не упомянутых здесь) с Flexbox.
просто добавьте следующий код контейнер элемент:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
Flexbox demo 1
.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>
вместо выравнивания содержимого через контейнер, flexbox также может центрировать a гибкий элемент С auto margin когда в контейнере flex есть только один flex-элемент (как пример, приведенный в предыдущем вопросе).
поэтому, чтобы центрировать элемент flex как по горизонтали, так и по вертикали, просто установите его с margin:auto
Flexbox Demo 2
.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
is row
. Если, однако, flex-элементы должны быть выложены в вертикальные столбцы, потом flex-direction: column
должен быть установлен на контейнере, чтобы установить основную ось как столбец и дополнительно justify-content
и align-items
свойства теперь работают наоборот С justify-content: center
центрирование по вертикали и align-items: center
центрирование по горизонтали)
flex-direction: column
демо
.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, наконец, выглядит так:
#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:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
использование:
.class-to-center {
@include vertical-align;
}
сообщение Себастьяна Экстрема в блоге вертикальное выравнивание всего с 3 линиями CSS:
этот метод может привести к размытости элементов из-за того, что элемент помещается на "половину пикселя". Решением для этого является установка родительского элемента для сохранения-3d. Как следующий:
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
мы живем в 2015 году+ и Flex Box поддерживается каждым основным современным браузером.
это будет то, как веб-сайты сделаны отсюда.
узнать это!
весь кредит идет на эту ссылку владельца @Sebastian Ekström ссылке; пожалуйста, пройти через это. Смотрите его в действии сайт CodePen. Прочитав вышеуказанную статью, я также создал демо-скрипка.
всего с тремя строками CSS (за исключением префиксов поставщика) мы можем сделать это с помощью преобразования: translateY вертикально центрирует все, что мы хотим, даже если мы не знаем его высоту.
преобразование свойств CSS обычно используется для вращения и масштабирование элементов, но с его функцией translateY теперь мы можем вертикально выровнять элементы. Обычно это должно быть сделано с абсолютным позиционированием или установкой высоты строки, но для этого требуется либо знать высоту элемента, либо работать только с однострочным текстом и т. д.
Итак, для этого пишем:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Это все, что вам нужно. Это аналогичная техника для метода абсолютного положения, но с плюсом, что нам не нужно устанавливать какую-либо высоту на элементе или position-свойство на родителе. Он работает прямо из коробки, даже в Internet Explorer 9!
чтобы сделать его еще более простым, мы можем написать его как mixin с его префиксами поставщика.
Flexboxes, которые были введены в CSS3 решение:
section {
display: flex;
display: -webkit-flex;
height: 200px;
width: 50%;
margin: auto;
border-radius: 20px;
border: 5px solid black;
background-color: yellow;
}
p {
text-align: center;
margin: auto; /* Important */
font-family: Calibri;
}
<section>
<p>
I'm center!<br/>
Flexboxes are great!
</p>
</section>
Примечание: замените строку, над которой отмечена как важная, одной из этих строк, Если вы хотите центрировать текст:
1) только по вертикали:
margin: auto 0;
2) только горизонтально:
margin: 0 auto;
обновление: как я заметил, этот трюк работает и с сетками (display: grid).
гибкий подход
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;
}
для получения дополнительной информации, см.:
попробовать данное решение:
.EXTENDER {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.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+.
вы также можете использовать ниже свойства.
display: flex;
align-content: center;
justify-content : center;
в качестве ссылки можно использовать следующий фрагмент кода. Это работает как шарм для меня:
<!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>
вывод вышеуказанного фрагмента кода выглядит следующим образом:
кредит исходного кода:как мне вертикально центрировать текст с помощью CSS? - Код Пуран
иначе:
Не устанавливайте на div
, но вместо того, чтобы использовать padding:
для достижения эффекта. Подобно высоте строки, он работает только в том случае, если у вас есть одна строка текста. Хотя таким образом, если у вас больше контента, текст все равно будет центрирован, но сам 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
of the div
to 60px
, и слева и справа padding
до нуля, делая div
120px (плюс высота вашего шрифта) и размещения текста по вертикали по центру в div.
для всех ваших потребностей вертикального выравнивания!
объявите этот Mixin:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
затем включите его в свой элемент:
.element{
@include vertical-align();
}
Я не уверен, что кто-то пошел в writing-mode
маршрут, но я думаю, что он решает проблему чисто и имеет широкая поддержка:
.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;
}
<div class="vertical">
<div class="horizontal">
<div class="content">
I'm centered in the vertical and horizontal thing
</div>
</div>
</div>
Это, конечно, будет работать с любыми размерами, которые вам нужны (кроме 100% родителя). Если вы раскомментируете границы, будет полезно ознакомиться.
демо JSFiddle для вас, чтобы играть на скрипке.
поддержка Caniuse: 85.22% + 6.26% = 91.48% (даже IE находится в!)
еще лучшая идея для этого. Вы можете сделать такой тоже
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>
для одной строки текста (или одного символа) вы можете использовать эту технику:
это можете использоваться, когда #box
имеет нефиксированное, относительная высота в %.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
посмотреть демо в JsBin (легче редактировать CSS) или JsFiddle (легче изменить высоту результирующей рамки).
если вы хотите разместить внутренний текст в HTML, а не в CSS, то вам нужно обернуть текстовое содержимое в дополнительном inline элемент и редактировать #box::after
, чтобы соответствовать его. (И, конечно, content:
свойство должно быть удалено.)
Например,<div id="box"><span>TextContent</span></div>
В этом случае #box::after
следует заменить на #box span
.
для поддержки IE8, вы должны заменить ::
С :
.
простой и универсальный способ (как подход таблицы michielvoo):
[ctrv]{
display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
display:table-cell;
vertical-align: middle;
// text-align: center; /* optional */
}
использование этого атрибута (или эквивалентного класса) в Родительском теге работает даже для многих детей, чтобы выровнять:
<parent ctrv> <ch1/> <ch2/> </parent>
попробуйте свойство transform:
#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>
очень простое и самое мощное решение для вертикального выравнивания центра:
.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>
следующий код поставит div в середине экрана независимо от размера экрана или div
размер:
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
<html>
<head>
</head>
<body>
<div class="center-screen">
I'm in the center
</div>
</body>
</html>
подробнее о flex
здесь.
Я видел предыдущие ответы, и они будут работать только для этой ширины экрана (не реагируют). Для отзывчивых вы должны использовать flex.
пример:
div{ display:flex; align-item:center;}
попробуйте следующий код:
display: table-cell;
vertical-align: middle;
div {
height: 80%;
width: 100%;
text-align: center;
display: table-cell;
vertical-align: middle;
background: #4CAF50;
color: #fff;
font-size: 50px;
font-style: italic;
}
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
Я просто хотел бы расширить ответ от @michielvoo, чтобы освободить потребность в высоте линии и дыхании высоты div. Это в основном просто упрощенная версия, как это:
div {
width: 250px;
/* height: 100px;
line-height: 100px; */
text-align: center;
border: 1px solid #123456;
background-color: #bbbbff;
padding: 10px;
margin: 10px;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>All grown-ups were once children... but only few of them remember it</span>
</div>
<div>
<span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>
Примечание: прокомментировал часть css
нужен fixed-height
вложения div
.
мне нужен был ряд кликабельных слонов, вертикально центрированных, но без использования таблицы, чтобы обойти некоторые странности Internet Explorer 9.
в конце концов я нашел самый хороший CSS (для моих нужд), и это здорово с Firefox, Chrome и Internet Explorer 11. К сожалению, Internet Explorer 9 все еще смеется надо мной...
div {
border: 1px dotted blue;
display: inline;
line-height: 100px;
height: 100px;
}
span {
border: 1px solid red;
display: inline-block;
line-height: normal;
vertical-align: middle;
}
.out {
border: 3px solid silver;
display: inline-block;
}
<div class="out" onclick="alert(1)">
<div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
<div> <span>A lovely clickable option.</span> </div>
</div>
<div class="out" onclick="alert(2)">
<div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
<div> <span>Something charming to click on.</span> </div>
</div>
очевидно, вам не нужны границы, но они могут помочь вам увидеть, как это работает.
установить его в button
вместо div
Если вы не заботитесь о своем маленьком визуальном 3D-эффекте.
#box
{
height: 120px;
width: 300px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
}
<button Id="box" disabled>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>
.element{position: relative;top: 50%;transform: translateY(-50%);}
добавить небольшой код в свойство CSS вашего элемента. Это потрясающе. Попробуй!
везде, где вы хотите вертикально центр стиль означает, что вы можете попробовать display:table-cell
и vertical-align:middle
.
пример:
#box
{
display: table-cell;
vertical-align: middle;
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
}
<div Id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
.box {
width: 100%;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
.height {
line-height: 170px;
height: 170px;
}
.transform {
height: 170px;
position: relative;
}
.transform p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
Lorem ipsum dolor sit
</div>
<hr />
<h4>Using Transform</h4>
<div class="box transform">
<p>Lorem ipsum dolor sit</p>
</div>
абсолютное позиционирование и растяжение
Как и в приведенном выше методе, этот начинается с установки позиционирования на родительских и дочерних элементах как относительного и абсолютного соответственно. Оттуда все по-другому.
в приведенном ниже коде я снова использовал этот метод для центрирования ребенка как по горизонтали, так и по вертикали, хотя вы можете использовать метод вертикального центрирования только.
HTML-код
<div id="parent">
<div id="child">Content here</div>
</div>
в CSS
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
идея этого метода состоит в том, чтобы попытаться заставить дочерний элемент растянуться до всех 4 ребер, установив верхнюю, нижнюю, правую и левую долины в 0. Поскольку наш дочерний элемент меньше, чем наши родительские элементы, он не может достигать всех 4 ребер.
установка auto в качестве поля на всех 4 сторонах, однако, приводит к тому, что противоположные поля равны и отображает наш дочерний div в центре Родительский div.
к сожалению, выше не будет работать в IE7 и ниже, и, как и предыдущий метод, содержимое внутри дочернего div может стать слишком большим, что приведет к его скрытию.