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

Question

Я пытаюсь найти наиболее эффективный способ выравнивания текста с помощью 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>

Answer 1

Используя css grid, я сделал это

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

Answer 2

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

Answer 3

Работает нормально

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

Answer 4

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

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

Answer 5

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

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

http://www.css -jquery-design.com / 2013/12 / CSS-метода-абсолютный горизонтальный и вертикальное центрирование-в-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>

Answer 6

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

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

Answer 7

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

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

Answer 8

CSS:

.vertical {
   display: table-caption;
}

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