Вертикальное выравнивание текста в div: Все способы вертикального выравнивания в CSS / Хабр

Leave a Comment / Разное / By /

Выравнивание текста — Учебник CSS — Schoolsw3.com

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ Назад Далее ❯

CSS Выравнивание текста и направление текста

В этой главе вы узнаете о следующих свойствах:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

Горизонтальное выравнивание текста

Свойство text-align используется для установки выравнивания текста по горизонтали.

Текст может быть выровнен по левому или правому краю, по центру или выровнен по ширине.

В следующем примере показаны 3 выровненных по центру и выровненных по левому и правому краю текста (выравнивание по левому краю по умолчанию, если направление текста слева направо, и выравнивание по правому краю по умолчанию, если направление текста справа налево):

Пример

h2 {
  text-align: center;
}

h3 {
  text-align: left;
}

h4 {
  text-align: right;
}

Попробуйте сами »

Когда, для свойства text-align установлено выравнивание по ширине значение «justify», каждая строка растягивается так, чтобы каждая строка имела одинаковую ширину, а левое и правое поля были прямыми (как в журналах и газетах):

Пример

div {
  text-align: justify;
}

Попробуйте сами »

Выравнивание последней строки текста

Свойство text-align-last указывает, как выровнять последнюю строку текста.

Пример

Выровнять последнюю строку текста по трем элементам <p>:

p.a {
  text-align-last: right;

}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

Попробуйте сами »

Направление текста

Свойства direction и unicode-bidi можно использовать для изменения направления текста элемента:

Пример

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Попробуйте сами »

Вертикальное выравнивание текста

Свойство vertical-align задает выравнивание элемента по вертикали.

Пример

Установите вертикальное выравнивание изображения в тексте:

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img. d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

Попробуйте сами »

CSS Свойства выравнивания/направления текста

СвойствоОписание
directionЗадает направление текста/направление записи
text-alignЗадает выравнивание текста по горизонтали
text-align-lastУказывает, как выровнять последнюю строку текста
unicode-bidiИспользуется вместе со свойством direction для установки или возврата того, следует ли переопределять текст для поддержки нескольких языков в одном документе
vertical-alignЗадает вертикальное выравнивание элемента

❮ Назад Далее ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3. CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.

SchoolsW3 работает на площадке от SW3.CSS.

Bootstrap вертикальное выравнивание различными способами

Доброго времени суток всем, кто желает найти то уникальное решение проблемы выравнивания текста. Так как проблем с горизонтальным выравниванием практически не бывает, то текущая статья посвящается разбору темы «Bootstrap вертикальное выравнивание».

Я расскажу, с помощью каких приемов можно выровнять контент по центру и приведу конкретные примеры кода. Поехали!

Способ 1. Нарисовать сетку

Для того чтобы выровнять по вертикали текстовый контент блоков, можно воспользоваться плагином фреймворка Bootstrap 3– Grid. При этом вам также придется вооружиться и свойством padding, которое отвечает за внутренние отступы объектов.

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

Вот такой код необходимо разместить в теге <body>:

1
2
3
4
5
6
7

<div>
  <div>
    <div>
<p>Здесь расположено очень содержательное предложение! А это второе не менее увлекательное предложение.</p>
    </div>
  </div>
</div>

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

Итак, .row создает строку, а в ней при помощи класса .col- X-Y объявляются колонки, а точнее ячейки. X отвечает за тип экрана, который определяется при помощи одного из четырех встроенных классов.

Я указал класс xs, который отвечает за мобильные устройства. А Y сообщает сколько колонок из общего числа (т.е. 12, так как это максимальное число) выделится под данный блок. Если же вам не нужно заполнять все пространство колонками, как и в моем примере, то можно воспользоваться специальным элементом col- X- offset-Y. Он задает отступы.

Далее прикрепленный ниже код стоит прописать в хедере страницы после скриптов:

1
2
3
4
5
6

<style>
.main {
background-color: orange;
padding: 45px;
}
</style>

Способ 2. Задействовать межстрочный интервал

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

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

В html-разметку вставьте:

1
2
3
4
5

<div>
  <div>
     <h2>Внимание заголовок!</h2>
    </div>
</div>

А в стилях укажите:

.parent { background-color: orange; }

.child {

line-height: 120px;

}

Способ 3. Обратиться за помощью к табличным представлениям

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

Для этого необходимо в родительском элементе указать значение свойства display равным table. А после дочерние элементы как бы поместить в созданную таблицу, т.е. в аналогичном свойстве задать значение равным table-cell. В этом случае становится возможным использовать vertical-align, что дословно и переводится как «вертикальное выравнивание».

Давайте разберем подробнее на примере кода. В гипертекстовой разметке я написал:

1
2
3
4
5

<div>
  <div>
     <h4>В этом оранжевом блоке, выступающим в качестве ячейки таблицы, написано очень длинное предложение с двумя запятыми и одним восклицательным знаком!</h4>
    </div>
</div>

Перейдем к стилям.

1
2
3
4
5
6
7
8
9
10
11

.parent { 
background-color: orange;
  width:100%; 
  display: table;
  height:150px;
}
.child {
    display: table-cell;
    text-align:center;
    vertical-align: middle;    
}

Благодаря данному способу реализуется динамическое выравнивание содержимого. Т.е. вы можете изменять значение высоты и при этом текст всегда будет располагаться посредине блока.

Однако есть небольшое НО. Если вам нужно верстать веб-приложение для старых версий Internet Explorer, то такой способ не сработает.

Теперь вы знаете три самых распространенных и наиболее универсальных способа выравнивания контента по вертикали. Однако не останавливайтесь на этом и экспериментируйте. Может быть вы найдете свое решение данной проблемы.

Буду признателен, если вы подпишитесь на обновления моего обучающего блога и расскажите о нем свои знакомым и коллегам. Удачного дня! Пока-пока!

С уважением, Роман Чуешов

Прочитано: 1511 раз

PrimeFlex

Управляет распределением гибких линий между элементами и вокруг них.

Классы
Класс Свойства
начало выравнивания содержимого выравнивание содержимого: flex-start;
выровнять содержимое-конец выравнивание содержимого: flex-end;
выровнять контент-центр выравнивание содержимого: по центру;
выровнять содержимое между выравнивание содержимого: пробел между;
выровнять содержимое вокруг выравнивание содержимого: пространство вокруг;
равномерное выравнивание содержимого выравнивание содержимого: ровное пространство;
Start

Линии Flex распределяются в начале контейнера.

<дел>
    <дел>
        <дел>1
        <дел>2
        <дел>3
Центр

Гибкие линии распределяются по центру контейнера.

<дел>
    <дел>
        <дел>1
        <дел>2
        <дел>3