Как выровнять текст по вертикали в div?

Я пытаюсь найти наиболее эффективный способ выравнивания текста с div. Я пробовал несколько вещей, и ни одна из них не работает.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
976
30 мая '10 в 22:02
источник поделиться
28 ответов

Вертикальное центрирование в CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Краткое содержание статьи:

Для браузера CSS2 можно использовать display:table/display:table-cell для центрирования контента.

Образец также доступен на JSFiddle:

div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

Можно объединить хаки для старого браузера (IE6/7) в стили с помощью # чтобы скрыть стили от новых браузеров:

div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>
691
30 мая '10 в 22:29
источник

Связанные вопросы


Похожие вопросы

Вам нужно добавить атрибут line-height и этот атрибут должен соответствовать высоте div. В твоем случае:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}
<div class="center">
  A single line.
</div>

На самом деле, вы можете удалить атрибут height вообще.

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

675
06 февр. '11 в 22:21
источник

Обновление - здесь отличный ресурс

http://howtocenterincss.com/

Центрирование в CSS - это боль в заднице. Кажется, что существует множество способов сделать это, в зависимости от множества факторов. Это объединяет их и дает вам код, необходимый для каждой ситуации.

Обновление - с помощью Flexbox

Inline, сохраняя этот пост в актуальном состоянии с помощью новейших технологий, здесь намного проще сконцентрироваться на использовании flexbox. Flexbox не поддерживается в IE9 and lower.

Вот несколько отличных ресурсов:

jsfiddle с префиксами браузера

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

Обновление - другое решение

Это от zerosixthree и позволяет вам центрировать все с 6 строками css

Этот метод не поддерживается в IE8 and lower

jsfiddle

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Предыдущий ответ

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

Как вертикально и горизонтально центрировать текст как в неупорядоченном списке, так и в div без использования высот строк JavaScript или css. Независимо от того, сколько текста у вас есть, вам не придется применять какие-либо специальные классы к конкретным спискам или divs (код для каждого из них одинаковый). Это работает во всех основных браузерах, включая IE9, IE8, IE7, IE6, Firefox, Chrome, Opera и Safari. Есть 2 специальных таблицы стилей (1 для IE7 и еще один для IE6), чтобы помочь им в связи с их ограничениями css, которых нет в современных браузерах.

Энди Ховард - Как вертикально и горизонтально центрировать текст в неупорядоченном списке или div

Edit: Поскольку я не очень заботился о IE7/6 для последнего проекта, над которым я работал, я использовал слегка урезанную версию (т.е. Удалил материал, который запустил его в IE7 и 6). Может быть полезно для кого-то еще...

jsfiddle

HTML

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>

И CSS:

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}
400
22 нояб. '12 в 18:18
источник

Это легко с display: flex. При использовании следующего метода текст в div будет центрирован по вертикали:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

А если хотите, горизонтальный

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

Вы должны увидеть нужную вам версию браузера; в старых версиях код работает.

160
12 дек. '15 в 23:25
источник

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

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Это центрирует текст в моей div до точной вертикальной середины внешней границы размером 200px div. Обратите внимание, что вам может понадобиться использовать префикс браузера (например, -webkit- в моем случае), чтобы сделать эту работу для вашего браузера.

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

108
24 янв. '14 в 17:11
источник

Вы можете сделать это, установив отображение в "table-cell" и применяя вертикальное выравнивание: среднее;

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

Однако это не поддерживается всеми версиями Internet Explorer в соответствии с этим отрывом, который я скопировал из http://www.w3schools.com/cssref/pr_class_display.asp без разрешения.

Примечание: Значения "встроенная таблица", "таблица", "таблица-подпись", "таблица-ячейка", "стол-столбец", "таблица-столбец-группа", "table-row", "table-row-group" и "inherit" не поддерживаются IE7 и ранее. Для IE8 требуется! DOCTYPE. IE9 поддерживает значения.

В следующей таблице показаны допустимые отображаемые значения также из http://www.w3schools.com/cssref/pr_class_display.asp. Я надеюсь, что это поможет

enter image description here

38
18 апр. '12 в 18:15
источник

UPD: в эти дни (нам больше не нужен IE6-7-8) я бы просто использовал css display: table для этой проблемы (или display: flex)

Таблица:

.vcenter{
    display: table;
    background:#eee;
    width: 150px;
    height: 150px;
    text-align: center;
}
    
.vcenter :first-child {
    display: table-cell;
    vertical-align: middle;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>
   

Flex:

.vcenter{
    display: flex; /* <-- here */
    background:#eee;
    width: 150px;
    height: 150px; /* <-- here */
    align-items: center; /* <-- here */
}
<div class="vcenter">
  <p>This is my Text</p>
</div>
   

Это мое любимое решение для этой проблемы (простой и очень хорошо поддерживаемый браузер):

div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br />Text<br />Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>
26
15 сент. '14 в 20:54
источник

Вот решение, которое лучше всего подходит для одной строки текста.

Он также может работать для многострочного текста с некоторой настройкой, если известно количество строк

.testimonialText{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}

Вот JSFiddle

8
08 окт. '14 в 9:50
источник

Вы можете выровнять текст по центру внутри div, используя flexbox.

<div>
   <p class="testimonialText"> This is the testimonial text. </p>
</div>

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

Вы можете узнать больше об этом по этой ссылке: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

7
21 дек. '16 в 5:39
источник
<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:250px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>
7
17 марта '17 в 8:07
источник

Проверьте это простое решение:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

JSFiddle

6
07 июня '14 в 11:14
источник

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

http://jsfiddle.net/bBW5w/1/

В него я добавил невидимый (width = 0) div, который принимает всю высоту контейнера.

Похоже, работает в IE и FF (последние версии), не проверял с другими браузерами

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

И конечно же CSS:

.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}
5
25 мая '14 в 23:42
источник

Мне не помог ни один ответ, попробуйте это, добавьте родительский div:

display:flex;
align-items:center;
5
15 мая '18 в 22:05
источник

Это самое чистое решение, которое я нашел (IE9+) и добавляет исправление для проблемы "off by.5 pixel", используя transform-style, который пропущены другими ответами.

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

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

Источник: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

5
30 июля '15 в 23:34
источник

Простое решение элемента неизвестных значений

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
4
21 сент. '16 в 16:53
источник

В соответствии с ответом Адама Томата был подготовлен jsfiddle example, чтобы выровнять текст в div

<div class="cells-block">    
    text<br/>in the block   
</div>

с помощью отображения: flex в CSS

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* vertically   */
    justify-content: flex-end; /* horisontally */
    text-align: right;         /* addition: for text lines */
}

с другим example и немного объяснений в blog.

3
30 авг. '17 в 14:58
источник

  h1{
  margin:0;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}
    <div class="container">
            <h1>vertical align text</h1>
    </div>

С помощью этого трюка вы можете выровнять что угодно, если вы не хотите, чтобы это было по центру, добавьте "left: 0" для выравнивания по левому краю.

2
15 мая '18 в 23:00
источник

Авто наценки на элемент сетки.
Аналогично flexbox, применение margin-auto к элементу сетки центрирует его по обеим осям.

.container{
  display: grid;
}
.element{
  margin: auto;
}
2
23 марта '19 в 21:24
источник

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }
2
25 авг. '14 в 11:59
источник

Использование flex должно быть осторожным с различиями в рендеринге браузеров.

Это хорошо работает как для Chrome, так и для IE:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}
<div class="outer"><div class="inner">Active Tasks</div></div>

Сравните с тем, который работает только с Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}
<div class="outer">
<div class="inner"><span style="    margin: auto;">Active Tasks</span></div>
</div>
2
18 февр. '16 в 16:03
источник

Это еще одна вариация div в шаблоне div с использованием calc() в CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Это работает, потому что:

  • position:absolute для точного размещения div в пределах div
  • знать высоту внутреннего div, потому что мы устанавливаем его на 20px.
  • calc(50% - 10px) для 50% - половина высоты для центрирования внутреннего div
1
31 июля '14 в 12:38
источник

Использование сетки CSS сделал это для меня.

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>
1
21 июня '18 в 13:57
источник

Работает отлично

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

SASS

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Без и с тегом изображения <mat-icon> (который является шрифтом)

1
30 янв. '18 в 12:42
источник

Хм, очевидно, есть много способов решить эту проблему.

Но у меня есть <div>, который позиционируется абсолютно, height:100% (фактически, top:0;bottom:0 и фиксированная ширина) и display:table-cell просто не работал, чтобы центрировать текст по вертикали. Мое решение действительно требовало внутреннего элемента span, но я вижу, что многие из других решений тоже, поэтому я мог бы также добавить его:

Мой контейнер - .label, и я хочу, чтобы в нем было вертикально центрировано. Я сделал это, установив абсолютно в top:50% и установив line-height:0

<div class="label"><span>1.</span></div>

И CSS выглядит следующим образом:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Смотрите в действии: http://jsfiddle.net/jcward/7gMLx/

0
04 апр. '14 в 22:00
источник

Попробуйте вставить элемент таблицы.

<div>
    <table style='width:200px; height:100px;'>
        <td style='vertical-align:middle;'>
            copenhagen
        </td>
    </table>
</div>
0
18 янв. '14 в 2:57
источник

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

Абсолютное горизонтальное и вертикальное центрирование в CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Существует более чем 10 методов с примерами. Теперь это зависит от вас, который вы предпочитаете.

Несомненно, display:table; display:table-Cell - лучший трюк.

Некоторые хорошие трюки следующие:

Трюк 1 - Используя display:table; display:table-Cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT 
    </div>
  </div>
</div>

Код CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Трюк 2 - Используя display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT 
  </div>
</div>

CSS-код

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

Трюк 3 - Используя position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER,<br>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>
-1
03 окт. '14 в 10:18
источник

CSS

.vertical {
   display: table-caption;
}

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

-2
02 апр. '15 в 4:42
источник

Если вам нужно использовать свойство min-height, вы должны добавить этот CSS:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}
-2
09 сент. '13 в 11:41
источник

Посмотрите другие вопросы по меткам или Задайте вопрос