Як вертикально вирівняти текст у діві?

Я намагаюся знайти найефективніший спосіб вирівняти текст із дівом. Я спробував кілька речей, і жодна, здається, не спрацювала.

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

Вертикальне центрування в 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>

Можливо об'єднати хаки для старих браузерів (Internet Explorer 6/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

На відміну від того, щоб цей пост було в курсі найновіших технологій, ось набагато простіший спосіб зосередити щось за допомогою 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>

Ще одне рішення

Це з zerosixthree і дозволяє вам зосередити що завгодно за допомогою шести рядків CSS

Цей спосіб не підтримується в Internet Explorer 8 і новіших версій .

jsfiddle

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

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

Попередня відповідь

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

Як вертикально та горизонтально центрувати текст як у невпорядкованому списку, так і у розділі, не вдаючись до висот JavaScript чи CSS . Незалежно від того, скільки тексту у вас є, вам не доведеться застосовувати будь-які спеціальні класи до певних списків або дівок (код однаковий для кожного). Це працює у всіх основних браузерах, включаючи Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera та Safari. Існують дві спеціальні таблиці стилів (одна для Internet Explorer 7 та інша для Internet Explorer 6), яка допомагає їм у зв'язку з обмеженнями CSS, яких не мають сучасні браузери.

Енді Ховард - Як вертикально та горизонтально центрувати текст у не упорядкованому списку чи розділі

Оскільки я не дуже переймався Internet Explorer 7/6 для останнього проекту, над яким я працював, я використав трохи збиту версію (тобто видалив речі, які змусили її працювати в Internet Explorer 7 і 6). Це може бути корисно для когось іншого ...

JSFiddle

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

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

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

Це легко 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%);
}

Це зосереджує текст у моєму divточному вертикальному середині зовнішньої сторони висотою 200 пікселів div. Зауважте, що вам може знадобитися використовувати префікс браузера (як, наприклад, -webkit-у моєму випадку), щоб зробити цю роботу для вашого браузера.

Це працює не тільки для тексту, але й для інших елементів.

Ви можете зробити це, встановивши дисплей «таблиці-осередок» і додаток 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", "table-row -group "та" nasledit "не підтримуються Internet Explorer 7 та новіших версій. Для Internet Explorer 8 потрібен! DOCTYPE. Internet Explorer 9 підтримує значення.

Наступна таблиця показує дозволені значення відображення також із http://www.w3schools.com/cssref/pr_class_display.asp .

У ці дні (нам вже не потрібен 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>

Flex:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

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

Це (власне, було) моє улюблене рішення цієї проблеми (простий і дуже добре підтримуваний браузер):

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

.vcenter {
    background: #eee;  /* optional */
    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>

Спробуйте це, додайте на батьківський div:

display: flex;
align-items: center;

Ось рішення, яке найкраще працює для одного рядка тексту.

Він також може працювати для багатоскладового тексту з певним перетворенням, якщо кількість рядків відома.

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

Ви можете вирівняти центральний текст вертикально всередині ключа, використовуючи Flexbox.

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

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

Ви можете дізнатися більше про це у Повному посібнику з Flexbox .

Перевірте це просте рішення:

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

Існує простіший спосіб вертикального вирівнювання вмісту, не вдаючись до таблиці / комірки таблиці:

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

У нього я додав невидимий (ширина = 0) діл, який передбачає всю висоту контейнера.

Здається, це працює в 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%;
}

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

Джерело: Вертикальне вирівнювання будь-чого лише за допомогою 3 рядків 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%);
}

Згідно з відповіддю Адама TOMAT там був підготовлений 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 */
}

з іншим прикладом і декількома поясненнями в публікації в блозі .

Автоматичне розміщення поля на елементі сітки.

Аналогічно до Flexbox, застосовуючи автоматичне поле на елементі сітки, центрируйте його на обох осях:

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

Flexbox прекрасно працював для мене, центрируючи кілька елементів всередині батьківського поділу по горизонталі та вертикалі.

HTML-код:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

CSS-код:
Код внизу укладає всі елементи всередині батьківського діла у стовпчик, централізуючи елементи горизонтально та вертикально. Я використовував дочір-дів, щоб утримувати два елементи якоря на одній лінії (рядку). Без дочірнього поділу всі три елементи (якір, якір та абзац) укладаються у стовпчик батьків-дів один на одного. Тут лише дочірнє-діва укладається у стовпець "батьків-дів".

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Використання:

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", щоб вирівняти ліворуч.

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

Використовуючи 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>

Порівняйте цей, який працює лише з 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>

Це ще одна варіація 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межах adiv
• ми знаємо висоту внутрішньої, 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>(який є шрифтом).

Хм, очевидно, існує багато способів вирішити це.

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

Мій контейнер - це .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 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>

Використання сітки 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>

Спробуйте вставити елемент таблиці.

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

CSS:

.vertical {
   display: table-caption;
}

Додайте цей клас до елемента, який містить речі, які потрібно вирівняти вертикально

Якщо вам потрібно використовувати цей min-heightресурс, потрібно додати цю CSS у:

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