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

Ответ 1

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

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

Для браузера CSS 2 можно использовать 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>

Ответ 2

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

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

Ответ 3

Здесь отличный ресурс

С http://howtocenterincss.com/:

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

Использование Flexbox

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

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

• Руководство по Flexbox
• Центрирование элементов с помощью Flexbox
• Синтаксис Internet Explorer 10 для Flexbox
• Поддержка Flexbox

JSFiddle с браузерными префиксами

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

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

Ответ 4

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

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Ответ 5

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

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- в моем случае), чтобы сделать эту работу для вашего браузера.

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

Ответ 6

Вы можете сделать это, установив для дисплея 'table-cell' и применив vertical-align: middle;:

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

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

Примечание: Значения "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", " таблица-строка-группа "и" наследовать "не поддерживаются Internet Explorer 7 и более ранними версиями. Internet Explorer 8 требует! DOCTYPE. Internet Explorer 9 поддерживает значения.

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

Ответ 7

В наши дни (нам больше не нужен Internet Explorer 6-7-8), я бы просто использовал CSS display: table для этой проблемы (или display: flex).

Для старых браузеров:

Таблица:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Ответ 8

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

display: flex;
align-items: center;

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

Вы можете выровнять текст по центру внутри div с помощью Flexbox.

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

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

Подробнее об этом можно прочитать в Полном руководстве по Flexbox.

Ответ 12

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

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

Ответ 13

Существует более простой способ выравнивания содержимого по вертикали без обращения к таблице/ячейке таблицы:

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

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

Похоже, работает в Internet Explorer и Firefox (последние версии). Я не проверял другие браузеры

  <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%;
}

Ответ 14

Это самое чистое решение, которое я нашел (Internet Explorer 9+), и добавляет исправление для проблемы "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%);
}

Источник: Выровняйте все по вертикали всего с 3 строками CSS

Ответ 15

Простое решение для элемента незнания значений:

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%);
}

Ответ 16

Согласно ответу Адама Томата, был подготовлен пример JSFiddle example для выравнивания текста в div:

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

с помощью display: 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 */
}

с другим примером и несколькими пояснениями в блоге.

Ответ 17

Использование:

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>

Ответ 18

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;
 }

Ответ 19

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

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

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

Ответ 20

Авто наценка на элемент сетки.

Как и во Flexbox, наложение поля auto на элемент сетки выравнивает его по обеим осям:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Ответ 21

Это еще одна вариация 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

Ответ 22

Это прекрасно работает:

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> (который является шрифтом).

Ответ 23

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

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Ответ 24

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

Но у меня есть <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/

Ответ 25

Использование 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>

Ответ 26

Вы можете использовать CSS flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

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

Ответ 27

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

Абсолютное горизонтальное и вертикальное центрирование в 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 Internet Explorer 9+ */
}

Трюк 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>

Ответ 28

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

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

Ответ 29

CSS

.vertical {
   display: table-caption;
}

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