центру - текст по вертикали html




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

Везде, где вы хотите вертикально vertical-align:middle стиль, вы можете попробовать 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>

У меня есть элемент 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>

Каков наилучший способ сделать это?


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

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

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

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

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

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

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


Вы можете легко сделать это, добавив следующий фрагмент кода 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>


Вы можете попробовать этот базовый подход:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

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

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

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

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 - тот же, что и второй пример:

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 .


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

Его можно использовать, когда #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, тогда вам нужно обернуть текстовое содержимое в дополнительный встроенный элемент и отредактировать #box::after будет соответствовать. (И, конечно, content: свойство следует удалить.)
Например,
<div id="box"><span>TextContent</span></div>
В этом случае #box::after следует заменить на #box span .

Для поддержки IE8 вы должны заменить :: на :


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

Чистый 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;
}

По почте блога Sebastian Ekström Вертикальное выравнивание всего лишь с тремя строками CSS :

Этот метод может привести к размытию элементов из-за того, что элемент размещен на «полупикселе». Решением для этого является установка родительского элемента для сохранения-3d. Как и следующее:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

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

Это будет способ создания сайтов здесь.

Узнать его!


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

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>


Мне нужен был ряд щелчкообразных слонов, вертикально центрированных, но без использования таблицы, чтобы обойти некоторые странности 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>

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


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

.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>


По-другому:

Не устанавливайте атрибут height 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 div на 60px , а левое и правое padding на ноль, что приведет к тому, что div 120px (плюс высота вашего шрифта) высок и поместив текст по вертикали в центр div.


Попробуйте свойство 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>


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

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>


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

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

#box
{
  display: table-cell;
  vertical-align: middle;
}

Дополнительную информацию см. В:


Решения Flexboxes, которые были введены в CSS3, - это решение:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

Примечание. Если вы хотите центрировать текст, замените строку выше, которая отмечена как важная для одной из этих строк:

1) Только вертикально:

margin: auto 0;

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

margin: 0 auto;

ОБНОВЛЕНИЕ : Как я заметил, этот трюк работает также с сетками (display: grid).


Установите его внутри 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>


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

Пример:

div{ display:flex; align-item:center;}

Я просто хотел бы продлить ответ от @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 .


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

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

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

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 в качестве поля на всех четырех сторонах, однако, приводит к тому, что противоположные поля равны и отображает наш дочерний div в центре родительского div.

К сожалению, вышеизложенное не будет работать в IE7 и ниже, и, как и предыдущий метод, содержимое внутри дочернего 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();
}

.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>





vertical-alignment