Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Vertical align in div text: html — How do I vertically align text in a div?

On

Vertical align in div text: html — How do I vertically align text in a div?

By alexxlab

Содержание

vertical-align — CSS | MDN

Свойство CSS  vertical-align описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).


vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;


vertical-align: 10em;
vertical-align: 4px;


vertical-align: 20%;


vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Свойство vertical-align может использоваться в двух контекстах:

  • Для вертикального позиционирования области строчного элемента внутри области содержащей его строки. Например, с помощью него можно вертикально позиционировать <img> в строке текста:
<p>
top:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
middle:<img src="https://mdn. mozillademos.org/files/15189/star.png"/>
bottom:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
super:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
sub:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
</p>
<p>
text-top:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
text-bottom:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
0.2em:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
-1em:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
20%:<img src="https://mdn.mozillademos.org/files/15189/star.png"/>
-100%:<img  src="https://mdn.mozillademos.org/files/15189/star.png"/>
</p>


#* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 .5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
  • Для вертикального позиционирования содержимого ячейки таблицы:
<table>
  <tr>
    <td>baseline</td>
    <td>top</td>
    <td>middle</td>
    <td>bottom</td>
    <td>
      <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p>
<p>Существует и другая теория, согласно которой это уже случилось.</p>
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table, th, td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

Обратите внимание: свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования блочных элементов.

Свойство vertical-align задаётся одним из ключевых значений, указанных ниже.

Значения для строчных элементов

Значения относительно родительского элемента

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

baseline
Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов (en-US), таких как <textarea> (en-US), не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.
sub
Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.
super
Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.
text-top
Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.
text-bottom
Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.
middle
Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).
<length>
Поднимает базовую линию элемента на указанную величину над базовой линией родительского элемента. Допустимы отрицательные значения.
<percentage>
Поднимает базовую линию элемента на указанную в процентах величину (вычисляется относительно значения свойства line-height) над базовой линией родительского элемента. Допустимы отрицательные значения.
Значения относительно строки

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

top
Выравнивает верхний край элемента и его потомков с верхним краем всей строки.
bottom
Выравнивает нижний край элемента и его потомков с нижним краем всей строки.

Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница внешнего отступа (margin).

Значения для ячеек таблицы

baseline (и sub, super, text-top, text-bottom, <length>, и <percentage>)
Выравнивает базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.
top
Выравнивает верхнюю границу внутреннего отступа (padding) ячейки с верхним краем строки таблицы.
middle
Выравнивает внутреннее поле (padding box) ячейки по центру относительно строки таблицы.
bottom
Выравнивает нижнюю границу внутреннего отступа (padding) ячейки с нижним краем строки таблицы.

Допустимы отрицательные значения.

Формальный синтаксис

HTML

<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по умолчанию.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по верхнему краю.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по нижнему краю.</div>
<div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" /> с выравниванием по центру.</div>

CSS

img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }

Результат

BCD tables only load in the browser

Разбираемся с vertical-align — Веб-стандарты

«Опять vertical-align не работает!» — вздохнёт веб-разработчик.

CSS-свойство vertical-align — одно из тех, которые с виду очень просты, но могут вызвать вопросы у начинающих разработчиков. Я думаю, что даже у многих ветеранов CSS когда-то были проблемы с тем, чтобы его до конца понять.

В этой статье я постараюсь в понятной форме рассказать про это свойство.

Чего оно не делаетСкопировать ссылку

Распространенное заблуждение о vertical-align состоит в том, что применяясь к одному элементу, оно заставляет все элементы внутри него изменить свою вертикальную позицию. Например, когда элементу задан vertical-align: top, это подразумевает, что его содержимое поднимется к его же верхней границе.

Вспоминаются времена, когда мы делали раскладки на основе таблиц:

<td valign="top">
    Что-нибудь…
</td>

В данном примере с ячейкой таблицы использование свойства valign (в настоящее время исключенного из HTML5) приведёт к тому, что элементы внутри ячейки прижмутся к её верху. И естественно, когда верстальщики начинают использовать vertical-align, они думают, что получится то же самое, и содержимое элемента выровняется в соответствии со значением свойства.

Но vertical-align работает не так.

Чем оно является на самом делеСкопировать ссылку

Использование свойства vertical-align может быть разбито на три простых для понимания правила:

  1. Оно применяется только к строчным элементам inline или строчным блокам inline-block.
  2. Оно влияет на выравнивание самого элемента, а не его содержимого (кроме случаев, когда применяется к ячейкам таблицы).
  3. Когда оно применяется к ячейке таблицы, выравнивание влияет на содержимое ячейки, а не на неё саму.

Иными словами, следующий код не даст никакого эффекта:

div {
    vertical-align: middle; /* эта строка бесполезна */
}

Почему? Потому что <div> — это не строчный элемент и даже не строчный блок. Конечно, если вы сделаете его строчным или строчным блоком, то применение vertical-align даст желаемый эффект.

С другой стороны, при правильном применении (к строчному элементу или строчному блоку), свойство vertical-align заставит текущий элемент выровняться относительно других строчных элементов.

Выше или ниже расположится элемент, будет зависеть от высоты строчных элементов на этой же строке или от свойства line-height, заданного для неё.

Несколько картинокСкопировать ссылку

Вот картинка с пояснительным текстом, которая поможет вам понять, что происходит при вертикальном выравнивании строчных элементов:

А вот пример, в котором есть несколько строчных элементов, один из которых прижат к верху.

Ключевые словаСкопировать ссылку

Несколько ключевых слов, которые можно задавать в качестве значений для свойства vertical-align:

  • baseline, значение по умолчанию или «изначальное»
  • bottom
  • middle
  • sub
  • super
  • text-bottom
  • text-top
  • top

Возможно, многие из них вы не будете использовать, но было бы неплохо знать все имеющиеся варианты. Например, на демо-странице, из-за того что значение vertical-align для <input> установлено как top, он выровнен по самому высокому элементу в строке (большой картинке).

Однако если вы не хотите выравнивать элемент относительно картинок или других строчных элементов, обладающих блочными свойствами, вы можете выбрать значение text-top или text-bottom, тогда элементы будут выравниваться относительно текста в строке.

О ключевом слове

middleСкопировать ссылку

К сожалению, правило vertical-align: middle не выровняет строчный элемент по середине самого высокого элемента в строке (как вы, возможно, ожидали). Вместо этого значение middle заставит элемент выровняться по середине высоты гипотетической строчной буквы «x» (так же называемой x-height). Потому, мне кажется, что это значение на самом деле должно называться text-middle, чтобы стало понятно, какой будет результат.

Взгляните на пример, где я увеличил размер шрифта так, чтобы размер x-height стал гораздо больше. После этого станет понятно, что значение middle не получится использовать очень часто.

Числовые значенияСкопировать ссылку

Возможно, вы не знали о том, что vertical-align принимает числовые и процентные значения. Однако это так, и вот примеры их использования:

input {
    vertical-align: 100px;
}

span {
    vertical-align: 50%;
}

img {
    vertical-align: -300px;
}

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

ЗаключениеСкопировать ссылку

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

Свойство vertical-align работает только со строчными элементами или строчными блоками и ячейками таблицы. В случае применения не к ячейкам таблицы, оно действует на сам элемент, а не на его содержимое.

vertical-align | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

Описание

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

Синтаксис

vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top|inherit | значение | проценты

Значения

baseline
Выравнивает базовую линию текущего элемента по базовой линии родителя. Если
родительский элемент не имеет базовой линии, то за нее принимается нижняя
граница элемента.
bottom
Выравнивает основание текущего элемента по нижней части элемента строки,
расположенного ниже всех.
middle
Выравнивание средней точки элемента по базовой линии родителя плюс половина
высоты родительского элемента.
sub
Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта
при этом не меняется.
super
Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта
остается прежним.
text-bottom
Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top
Верхняя граница элемента выравнивается по самому высокому текстовому элементу
текущей строки.
top
Выравнивание верхнего края элемента по верху самого высокого элемента строки.
inherit
Наследует значение родителя.

В качестве значения также можно использовать проценты, пикселы или другие доступные
единицы. Положительное число смещает элемент вверх относительно базовой линии,
в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline.

Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.

baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по ее верхнему краю.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
 </head>
 <body>
  <div>
  T<span>E</span>X и L<span 
 >A</span>T<span 
 >E</span>X
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства vertical-align

Объектная модель

[window.]document.getElementById(«elementID»).style.verticalAlign

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Как вертикальное выравнивание элементов в div?

По умолчанию h2 является элементом блока и будет отображаться в строке после первого img, а второй img появится в строке, следующей за блоком.

Чтобы это не происходило, вы можете установить h2 для поведения встроенного потока:

#header > h2 { display: inline; }

Что касается абсолютного позиционирования img внутри div , вам нужно установить содержащий div для «известного размера», прежде чем это будет работать должным образом. По моему опыту, вам также нужно изменить атрибут позиции с значения по умолчанию — положение: относительный работает для меня:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Если вы можете заставить это работать, вы можете попытаться постепенно удалять атрибуты height, width, position из div.header, чтобы получить минимальные обязательные атрибуты для получения желаемого эффекта.

ОБНОВИТЬ:

Вот полный пример, который работает на Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h2 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div>
            <img src="#" alt="Image 1" />
            <h2>Header</h2>
            <img src="#" alt="Image 2" 
                 />
        </div>
    </body>
</html>

Свойство vertical-align, вертикальное выравнивание текста — Оформление текста — HTML Academy

HTML

<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Сайт начинающего верстальщика</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<header>
<h2>Сайт начинающего верстальщика</h2>
</header>
<main>
<div>
<img src=»img/raccoon.svg» alt=»Аватарка»>
</div>
<nav>
<h3>Записи в блоге</h3>
<ul>
<li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li>
<li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li>
<li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li>
<li><a href=»day-4.html»>День четвёртый. Как я чуть не заболел</a></li>
<li><a href=»day-5.html»>День пятый. Отдыхаю</a></li>
<li><a href=»day-6.html»>День шестой. Как я ничего не понял, продолжение</a></li>
<li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li>
<li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li>
<li><a href=»day-9.html»>День девятый. Точнее ночь</a></li>
<li><a href=»day-10.html»>День десятый. Подведение итогов</a></li>
<li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li>
<li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li>
<li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li>
<li><a href=»day-14.html»>День четырнадцатый. Новый формат</a></li>
<li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li>
</ul>
</nav>
<section>
<p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p>
<p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p>
</section>
<section>
<h3>Навыки</h3>
<dl>
<dt>HTML</dt>
<dd><div>60%</div></dd>
<dt>CSS</dt>
<dd><div>20%</div></dd>
<dt>JS</dt>
<dd><div>10%</div></dd>
</dl>
</section>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>

CSS

body {
padding: 0 30px;
font-size: 16px;
line-height: 26px;
font-family: «Arial», sans-serif;
color: #222222;

background: #ffffff url(«img/bg-page.png») no-repeat top center;
}

h2 {
font-size: 24px;
line-height: normal;
}

h3 {
font-size: 20px;
line-height: normal;
}

a {
color: #0099ef;
text-decoration: underline;
}

.page-title {
font-weight: bold;
font-size: 36px;
line-height: 42px;
font-family: «Verdana», sans-serif;
text-align: center;
}

.avatar-container {
text-align: center;
}

.avatar {
border-radius: 50%;
}

.blog-navigation {
margin-bottom: 30px;
padding: 20px;

color: #ffffff;

background-color: #4470c4;
border: 5px solid #2d508f;
}

.blog-navigation h3 {
margin-top: 0;
}

.blog-navigation ul {
padding-left: 0;
list-style: none;
}

.blog-navigation li {
margin-bottom: 5px;
}

.blog-navigation a {
color: #ffffff;
}

.skills dd {
margin: 0;
margin-bottom: 10px;

background-color: #e8e8e8;
}

.skills-level {
font-size: 12px;
text-align: center;
color: #ffffff;
background-color: #4470c4;
}

.skills-level-ok {
background-color: #47bb52;
}

footer {
margin-top: 30px;
}

image — css — div text vertical-align


css text vertical-align in div / css / vertical-alignment

Как вы можете выровнять изображение внутри содержащего div ?

<div>
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame {
    height: 25px;      
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>






Community


Answer #1

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}

img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Ключевые вещи

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

Выравнивание текста по вертикали и по центру с помощью CSS.

Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.

Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.

Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.

Нужно учитывать такой момент, что vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для строчных элементов, для выравнивания их друг относительно друга в пределах одной строки.

Для блочных элементов свойство vertical-align не работает.

Есть два способа, как можно выйти из этой ситуации:

Для тех, кто предпочитает все смотреть в видео:

Для тех, кто любит текст, читайте ниже способ решения этой проблемы.

Способ А. Как одно из решений, можно разместить текст не в элементе div, а в ячейке таблицы.

<table>
<tr>
<td>
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
</td>
</tr>
</table>

Способ Б. Использовать своство display:table-cell;

<div>
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
</div>

Одна проблема, это свойство не поддерживают Internet Explorer 6-7 версии.

Ситуация 1. Выравнивание одной строки текста. 

Рассмотрим простой пример.

<div>Строка, которая должна быть выровнена по вертикали</div>

Строка текста располагается по верхнему краю. Т.к. у нас всего одна строка текста, то для выравнивания можно воспользоваться самым простым способом: это добавление свойства line-height со значением равным высоте элемента div, в котором текст находится.

<div>Строка, которая должна быть выровнена по вертикали</div>

Этот способ хорошо работает, когда у вас всего одна строка с текстом.

Ситуация 2. Если известны точные значения ширины и высоты дочернего блока, где располагается сам текст.

Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.

<div>
<div>
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
</div>
</div>

Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.

Есть еще более современное решение этой проблемы — использование flexbox.

Подробнее здесь.

Если не нужна поддержка старых браузеров, этот вариант будет самым оптимальным.

Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.

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

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

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

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

Имеется более 10 методик с примерами. Теперь вам решать, что вы предпочитаете.

Без сомнения, дисплей: стол; display: table-Cell — лучший трюк.

Вот несколько хороших приемов:

Уловка 1 — Используя дисплей : таблица; дисплей: таблица-ячейка

HTML 

  

  

    

        СОДЕРЖАНИЕ

Код CSS 

  .Центр-контейнер.is-Table {display: table; }
.is-Table .Table-Cell {
  дисплей: таблица-ячейка;
  вертикальное выравнивание: по центру;
}
.is-Table .Center-Block {
  ширина: 50%;
  маржа: 0 авто;
}

Уловка 2 — Используя дисплей : встроенный блок

HTML 

  

  

     СОДЕРЖАНИЕ

Код CSS 

  .Center-Container.is-Inline {
  выравнивание текста: центр;
  перелив: авто;
}

.Center-Container.is-Inline: после,
.is-Inline .Center-Block {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
}

.Center-Container.is-Inline: после {
  содержание: '';
  высота: 100%;
  маржа слева: -0,25em; / * Чтобы сместить интервал. Может отличаться в зависимости от шрифта * /
}

.is-Inline .Center-Block {
  максимальная ширина: 99%; / * Предотвращает проблемы с длинным содержимым, заставляет блок содержимого перемещаться наверх * /
  / * max-width: calc (100% - 0,25em) / * Только для Internet & nbsp; Explorer 9+ * /
}

Уловка 3 — Используя положение: относительное; положение: абсолютное 

  

  

    
 АБСОЛЮТНЫЙ ЦЕНТР, 


В КОНТЕЙНЕРЕ.
    
 Этот блок абсолютно центрирован по горизонтали и вертикали внутри своего контейнера

html — Как центрировать текст по вертикали с помощью CSS?

Другой способ (здесь еще не упомянут) — использование Flexbox.

Просто добавьте следующий код в элемент контейнера :

  дисплей: гибкий;
justify-content: center; / * выравниваем по горизонтали * /
align-items: center; / * выравниваем по вертикали * /
  
 .коробка {
  высота: 150 пикселей;
  ширина: 400 пикселей;
  фон: # 000;
  размер шрифта: 24 пикселя;
  стиль шрифта: наклонный;
  цвет: #FFF;
  выравнивание текста: центр;
  отступ: 0 20 пикселей;
  маржа: 20 пикселей;
  дисплей: гибкий;
  justify-content: center;
  / * выравниваем по горизонтали * /
  align-items: center;
  / * выравниваем по вертикали * /
}  
  

  Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diam nonummy nibh

В качестве альтернативы, вместо выравнивания содержимого через контейнер , flexbox может также центрировать гибкий элемент с автоматическим полем , когда в гибком контейнере есть только один гибкий элемент (как в примере, приведенном в вопросе выше ).

Итак, чтобы центрировать гибкий элемент по горизонтали и вертикали, просто установите его с полем : auto 

  .box {
  высота: 150 пикселей;
  ширина: 400 пикселей;
  фон: # 000;
  размер шрифта: 24 пикселя;
  стиль шрифта: наклонный;
  цвет: #FFF;
  выравнивание текста: центр;
  отступ: 0 20 пикселей;
  маржа: 20 пикселей;
  дисплей: гибкий;
}
.box span {
  маржа: авто;
}  
  

   margin: auto на гибком элементе центрирует его по горизонтали и вертикали

NB: Все вышеизложенное относится к центрированию элементов при размещении их в горизонтальных рядах .Это также поведение по умолчанию, потому что по умолчанию значение flex-direction — это строка . Если, однако, гибкие элементы необходимо расположить в вертикальных столбцах , тогда необходимо установить flex-direction: column в контейнере, чтобы установить главную ось в качестве столбца и дополнительно выравнивать justify-content и . -items свойства теперь работают наоборот вокруг с justify-content: center по вертикали и align-items: center по горизонтали)

 .коробка {
  высота: 150 пикселей;
  ширина: 400 пикселей;
  фон: # 000;
  размер шрифта: 18 пикселей;
  стиль шрифта: наклонный;
  цвет: #FFF;
  дисплей: гибкий;
  flex-direction: столбец;
  justify-content: center;
  / * выравнивает элементы по вертикали * /
  align-items: center;
  / * выравнивает элементы по горизонтали * /
}
п {
  маржа: 5 пикселей;
  }  
  

  

    Когда направление гибкости - столбец ...
  

  

    "justify-content: center" - выравнивает по вертикали.
  

  

    "align-items: center" - выравнивает по горизонтали

Хорошее место для начала работы с Flexbox, чтобы увидеть некоторые его функции и получить синтаксис для максимальной поддержки браузера, — это flexyboxes

.

Кроме того, поддержка браузеров в настоящее время очень хорошая: caniuse

Для кроссбраузерности дисплея : flex и align-items можно использовать следующее:

  дисплей: -webkit-box;
дисплей: -webkit-flex;
дисплей: -moz-box;
дисплей: -ms-flexbox;
дисплей: гибкий;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

html — как вертикально выровнять текст внутри элемента css?

html — Как вертикально выровнять текст внутри элемента

css? — Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено
11к раз

На этот вопрос уже есть ответы здесь :

Закрыт 2 года назад.

Я впервые делаю расширение Chrome и пытаюсь центрировать текст. И в тот момент, когда я использую text-align: center; , чтобы выровнять его по горизонтали, но не могу понять, как выровнять по вертикали, поэтому на данный момент мой текст выглядит так:

Было бы здорово, если бы кто-нибудь мог помочь.

Создан 18 сен.

Алекс Хокинг, Алекс Хокинг

69544 золотых знака1111 серебряных знаков2727 бронзовых знаков

0

пр.) Дисплей: таблица

  div {
  дисплей: таблица;
  ширина: 100 пикселей;
  высота: 50 пикселей;
  цвет фона: # 000;
}

div p {
  дисплей: таблица-ячейка;
  выравнивание текста: центр;
  вертикальное выравнивание: по центру;
  цвет: #fff;
}  
  

  
 болтовня

пр.) Шлейф

  div {
  дисплей: гибкий;
  align-items: center;
  justify-content: center;
  ширина: 100 пикселей;
  высота: 50 пикселей;
  цвет фона: # 000;
}

div p {
  цвет: #fff;
}  
  

  
 болтовня

пр.) Позиция

  div {
  положение: относительное;
  ширина: 100 пикселей;
  высота: 50 пикселей;
  цвет фона: # 000;
  выравнивание текста: центр;
}
div p {
  позиция: абсолютная;
  верх: 0;
  справа: 0;
  внизу: 0;
  слева: 0;
  цвет: #fff;
}  
  

  
 болтовня

Создан 18 сен.

SJ_OWOWSJ_OWOW

17211 серебряный знак55 бронзовых знаков

1

Очень простой класс, который я использую для этого, —

.

 .is-vertical-center {
    дисплей: гибкий;
    align-items: center;
}

Надеюсь, это поможет!

Создан 18 сен.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

Как выровнять текст по вертикали по центру в DIV с помощью CSS

Тема: HTML / CSSPrev | След.

Ответ: Используйте свойство CSS

line-height

Если вы попытаетесь выровнять текст по вертикали по центру внутри div с помощью правила CSS vertical-align: middle; у вас не получится.Предположим, у вас есть элемент div с высотой 50px , и вы разместили в нем ссылку, которую хотите выровнять по вертикали по центру. Самый простой способ сделать это — просто применить свойство line-height со значением, равным высоте div, которое составляет 50px .

Суть этого трюка заключается в том, что если значение свойства line-height больше, чем значение font-size для элемента, разница (так называемая «ведущая») уменьшается вдвое и распределяется равномерно. сверху и снизу встроенного блока, которые выравнивают встроенные элементы по вертикали по центру элемента.

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

  



 Вертикально центрировать текст с помощью CSS 
<стиль>
    .меню{
        высота: 20 пикселей;
        высота строки: 20 пикселей;
        отступ: 15 пикселей;
        граница: 1px solid # 666;
    }

Связанные часто задаваемые вопросы

Вот еще несколько часто задаваемых вопросов по этой теме:

vertical-align — CSS: каскадные таблицы стилей

Свойство vertical-align CSS устанавливает вертикальное выравнивание встроенного блока, блока встроенного блока или ячейки таблицы.

Свойство vertical-align можно использовать в двух контекстах:

Обратите внимание, что vertical-align применяется только к элементам inline, inline-block и table-cell: вы не можете использовать его для вертикального выравнивания элементов уровня блока.

 
вертикальное выравнивание: базовая линия;
вертикальное выравнивание: суб;
вертикальное выравнивание: супер;
вертикальное выравнивание: верхний текст;
вертикальное выравнивание: нижний текст;
вертикальное выравнивание: по центру;
вертикальное выравнивание: сверху;
вертикальное выравнивание: снизу;


вертикальное выравнивание: 10em;
вертикальное выравнивание: 4 пикселя;


вертикальное выравнивание: 20%;


вертикальное выравнивание: наследование;
вертикальное выравнивание: начальное;
вертикальное выравнивание: вернуть;
вертикальное выравнивание: отключено;

Свойство vertical-align указано как одно из значений, перечисленных ниже.

Значения для встроенных элементов

Родительские относительные значения

Эти значения выравнивают элемент по вертикали относительно его родительского элемента:

исходный
Выравнивает базовую линию элемента с базовой линией его родительского элемента. Базовая линия некоторых заменяемых элементов, таких как