Как выровнять текст по вертикали в 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>

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>

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

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

на самом деле, вы, вероятно, могли бы удалить height атрибут в целом.

это работает только для одна строка текста хотя, так что будьте осторожны.


обновление - Вот отличный ресурс

http://howtocenterincss.com/

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

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

Inline с держать этот пост в курсе последних технологий, вот гораздо более простой способ что-то, используя на основе. 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 line heights. Нет независимо от того, сколько текста у вас есть, вам не придется применять какие-либо специальные классы к определенным спискам или 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;
}

это легко с 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>

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


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

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

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

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


вы можете сделать это, установив на дисплее таблицы-ячейки и применив вертикальный-выровняйте:середина;

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

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

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

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

enter image description here


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

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">
  <p>This is my Text<br />Text</p>
</div>
<div class="vcenter">
  <p>This is my Text<br />Text<br />Text</p>
</div>


   
   

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

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

.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


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

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

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


вы можете выровнять центральный текст по вертикали внутри 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/


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

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

Это самое чистое решение, которое я нашел (IE9+), и добавляет исправление для "off by .5 пикселей" проблема с помощью 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/


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

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

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

согласно ответу Адама томата, был подготовлен jsfiddle пример выровнять текст в 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's lines */
}

С другой пример и мало объяснений в блог.


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

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

display:flex;
align-items:center;

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

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

HTML-код

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

Сасс

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

без и с тег <mat-icon> (это шрифт)


  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>

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


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

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

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

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


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

здесь несколько трюков для отображения содержимого / изображения в центре 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>

CSS:

.vertical {
   display: table-caption;
}

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


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

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

Как просто, как это, документы:

свойство CSS вертикального выравнивания указывает вертикальное выравнивание inline таблицы или ячейки.

#HTML
<div>
  <span>Text</span>
</div>

#CSS
span {
  vertical-align: middle;
}