6 методов вертикального центрирования с помощью css
Содержание:
- Преимущества таблиц
- Где может работать фотограф
- Выравнивание элементов. align-items и align-self
- Использование таблицы для выравнивания текста по вертикали в CSS
- Как выровнять в html текст по центру?
- Text-decoration, text-align, text-indent в CSS
- Скрыть лишние строки можно следующими способами:
- Вертикальное выравнивание
- CSS — Выравнивание по вертикали
- Рамки и отрицательные отступы
- Display: flex и выравнивание
- Абсолютное позиционирование и растягивание
- Абсолютное позиционирование и отрицательные поля
- display: table-cell
- Вертикальное выравнивание строчных элементов
- flexbox CSS
- Пример использования
- Центровка в блоке переменной высоты
- Заключение
Преимущества таблиц
Таблица, быть может, и не создана для построения структуры сайта, однако, она, как никакой другой элемент, удобна для вертикального позиционирования. Внутри табличной ячейки мы можем творить с контентом все, что захотим, и ничего нам за это не будет. Однако для этого нам придется полностью сымитировать HTML-таблицу средствами CSS, то есть придется добавить еще один элемент:
<div class=’wrapper’>
<div class=’parent’>
<div class=’child’></div>
</div>
</div>
|
1 2 3 4 5 6 7 |
<div class=’wrapper’> <div class=’parent’> <div class=’child’><div> <div> <div> |
CSS
.wrapper{
display:table;
}
.parent{
display:table-cell;
vertical-align:middle;
}
|
1 2 3 4 5 6 7 8 9 |
.wrapper{ displaytable; } .parent{ displaytable-cell; vertical-alignmiddle; } |
CHILD
Где может работать фотограф
Большинство фотографов предпочитают работать на себя. Найти работу можно где угодно: предлагать свои услуги друзьям и знакомым, рекламировать фотографии в интернете.
Можно даже продавать фотографии в интернете, правда больших денег на этом не заработать. Сначала без опыта будет трудно.
Удивительно, но есть люди, которым не нравится работать на себя. Ведь никто не дает гарантии заработка, а «дядя» всегда заплатит за проделанную работу. Такие люди работают в средствах массовой информации. В этом тоже есть свой плюс.
Начинающий самостоятельный фотограф первое время будет перебиваться случайными заработками. А работа в какой-либо компании дает постоянный доход.
Также можно использовать фотографирование в качестве подработки.
Выравнивание элементов. align-items и align-self
Последнее обновление: 18.04.2017
Свойство align-items
Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали).
Это свойство может принимать следующие значения:
-
stretch: значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине
(при расположении в столбик) flex-контейнера -
flex-start: элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю
(при расположении в столбик) flex-контейнера -
flex-end: элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю
(при расположении в столбик) flex-контейнера -
center: элементы выравниваются по центру flex-контейнера
-
baseline: элементы выравниваются в соответствии со своей базовой линией
Выравнивание при расположении в строку:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox в CSS3</title>
<style>
.flex-container {
display: flex;
border:1px #ccc solid;
height:5em;
}
.flex-start{
align-items: flex-start;
}
.flex-end{
align-items: flex-end;
}
.center{
align-items: center;
}
.baseline{
align-items: baseline;
}
.flex-item {
text-align:center;
font-size: 1em;
padding: 1.2em;
color: white;
}
.largest-item{
padding-top:2em;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
.color4 {background-color: #2A9FBC;}
</style>
</head>
<body>
<h3>Flex-start</h3>
<div class="flex-container flex-start">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
<div class="flex-item color4">Flex Item 4</div>
</div>
<h3>Flex-end</h3>
<div class="flex-container flex-end">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
<div class="flex-item color4">Flex Item 4</div>
</div>
<h3>Center</h3>
<div class="flex-container center">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
<div class="flex-item color4">Flex Item 4</div>
</div>
<h3>Baseline</h3>
<div class="flex-container baseline">
<div class="flex-item color1">Flex Item 1</div>
<div class="flex-item color2 largest-item">Flex Item 2</div>
<div class="flex-item color3">Flex Item 3</div>
<div class="flex-item color4">Flex Item 4</div>
</div>
</html>
Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:
.flex-container {
display: flex;
border:1px #ccc solid;
flex-direction:column;
width:12em;
}
Свойство align-self
Свойство align-self позволяет переопределить значение свойства для одного элемента.
Оно может принимать все те же значения плюс значение «auto»:
-
auto: значение по умолчанию, при котором элемент получает значение от свойства , которое определено
в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значение . -
stretch
-
flex-start
-
flex-end
-
center
-
baseline
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox в CSS3</title>
<style>
.flex-container {
display: flex;
border:1px #ccc solid;
justify-content: space-between;
align-items: stretch;
height:12em;
}
.flex-item {
text-align:center;
font-size: 1em;
padding: 1.2em;
color: white;
}
.item1 {background-color: #675BA7; align-self: center; }
.item2 {background-color: #9BC850; align-self: flex-start;}
.item3 {background-color: #A62E5C; align-self: flex-end;}
.item4 {background-color: #2A9FBC; align-self: center;}
</style>
</head>
<body>
<h3>Align-self</h3>
<div class="flex-container">
<div class="flex-item item1">Flex Item 1</div>
<div class="flex-item item2">Flex Item 2</div>
<div class="flex-item item3">Flex Item 3</div>
<div class="flex-item item4">Flex Item 4</div>
</div>
</html>
Здесь для flex-контейнера задано растяжение по высоте с помощью значения . Однако каждый из элементов переопределяет это поведение:
НазадВперед
Использование таблицы для выравнивания текста по вертикали в CSS
В отличие от инлайн-блоков, выравнивание ячейки таблицы позволяет переместить и ее содержимое. Сделать это можно просто средствами HTML.
<table id="outwrap">
<td id="out">
<div id="in"></div>
</td>
</table>
Недостатков у такого подхода два:
- Неправильно с позиции семантики применять таблицы для этой цели.
- Необходимо создать лишний элемент.
Исправить первый недостаток можно, изменив теги table и td на div и использовать режим отображения «table» и «table-cell» соответственно.
#outwrap {
display: table;
}
#out {
display: table-cell;
}
Но вот второй недостаток все равно останется. Код будет немного тяжеловат, особенно если таких элементов много.
Как выровнять в html текст по центру?
В HTML есть два варианта, которые не предполагают использование CSS.
-
1.Тег <center>
Очень простой в использовании тег, который выравнивает по центру все строчные элементы, которые в нём находятся, а именно:- текст,
- картинки,
- ссылки,
- а также теги <span>, <strong>, <b>, <gt;, <gt;, <input><select> и некоторые другие.
PHP
<center>
Текст, который нужно выровнять по центру.
</center>1
2
3<center>
Текст,которыйнужновыровнятьпоцентру.
<center>
-
2.Использование HTML атрибута align cо значением center.
Этот атрибут нам нужно дописать внутри блочного тега, в котором находится текст, который нам нужно выровнять по центру.
Это может быть тег <div>, <p>, <h1> <h2>… <h6> <blockquote> <form> <section> и некоторые другие.PHP
<h2 align=»center»>Выравнивание текста по центру при помощи HTML</h2></li>
1 <h2 align=»center»>ВыравниваниетекстапоцентруприпомощиHTML<h2><li>
Если у вас не срабатывает выравнивание заданное при помощи HTML, то, скорее всего, для этого блока уже задано выравнивание в CSS.
Так же атрибут align имеет и другие значения:
- align=’»left’ — выравнивание текста по левому краю
- align=’right’ – выравнивание по правому краю
- align=’justify’ – выравнивание текста по ширине
Text-decoration, text-align, text-indent в CSS
Как же в Css работать с текстом? Вполне логично будет предположить, что для этой цели существуют специально предназначенные правила. Давайте начнем с text-align, которое является фактически заменой атрибута align (он использовался в чистом Html 4.01 по версии валидатора для выравнивания содержимого, например, абзацев P или заголовков).
Он имеет всего четыре возможных значения:
Смысл остается таким же, как и был раньше. Text align — это горизонтальное выравнивание строк. Применяется это правило исключительно только для блочных элементов (параграфы, заголовки и т.п.), т.е. тех тегах, в которых может появиться несколько строк. Т.к. в строчных элементах строк может быть только одна, то и смысла использования в них text-align особого нет.
Понятно, что значения этого правила означают выравнивание, соответственно: по левому краю (left), по правому краю (right), по центру (center) и по ширине страницы (Justify — одновременно по левому и правому краю за счет увеличения расстояния между словами). Само собой, что значение Justify стоит использовать для элементов хотя бы с несколькими строками текста, иначе видимого эффекта от этого не будет.
Для примера, я выровнял предыдущий абзац по ширине (видите у него ровные границы и слева, и справа), используя:
text-align:justify;
По умолчанию горизонтальное выравнивание текста осуществляется по левому краю, т.е. специально писать text-align:left не нужно, если, конечно же, раньше вы не задавали другое выравнивание. Этот абзац я, кстати, выровнял по центру (center) опять же для наглядного примера, но тут, я думаю, все и так понятно.
Следующее Css правило text-indent позволяет задать красную строку, например, для текста в теге абзаца P. Отступ красной строки можно задать с помощью указания величины (как со знаком плюс, так и со знаком минус, используя размеры (пиксели, em или ex) допустимые в CSS) или с помощью процентов:
От чего считаются проценты в text-indent? От ширины области, которая отведена под текст. Т.е. Css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. Ну, а этот абзац как раз и служит примером такого правила.
А можно, например, задать отрицательное значение красной строки в text-indent и тогда мы получим примерно то, что вы видите в этом абзаце. Для достижения данного результата я написал для тега абзаца P вот такое вот CSS правило:
text-indent:-1em;
Ну, а обычное использование text-indent (для задания стандартной красной строки) может выглядеть так: text-indent:40px; (кстати, применено к этому параграфу). Это правило, так же как и рассмотренное раньше text-align, применяется только для блочных элементов, т.е. там, где может появиться несколько строк (абзацы, заголовки и т.п.).
Так, теперь давайте перейдем к text-decoration (оформление с помощью горизонтальной линии), которое применяется уже ко всем Html элементам (и строчным, и блочным).
Оно может иметь всего четыре значения:
Т.е. можно использовать с помощью text-decoration: надчеркивание (overline), перечеркивание (line-through) или подчеркивание (underline), ну, или вообще ничего не использовать (none). Некоторые Html элементы уже имеют по умолчанию оформление горизонтальной линией, например, гиперссылки (тег A) (они по умолчанию подчеркиваются).
Поэтому выделять что-то еще подчеркиванием (кроме гиперссылок) не есть хорошо, ибо у пользователей в подсознании записано, что раз подчеркнуто (а еще и цветом выделено) — значит по этому можно кликнуть для перехода. Но выделяя подчеркиванием обычный текст, вы вводите пользователя в заблуждение и последующее за ним разочарование вашим ресурсом (он то думал, а оказалось что…).
Если текст гиперссылки нужно будет сделать неподчеркнутым (например, в меню), то используйте для text decoration элемента гиперссылки значение none.
Нюансом в использовании Css правила text-decoration является то, что можно будет прописать сразу три (иди два) значения для любого Html элемента (опуская none) и в результате вы получите надчеркнуто-подчеркнуто-перечеркнутый фрагмент текста (прикольно звучит и смотрится, не правда ли?):
text-decoration:underline overline line-through;
Значения для text decoration (если вы хотите использовать сразу несколько из них) нужно писать через символ пробел.
Скрыть лишние строки можно следующими способами:
- Первый способ — самый простой и примитивный заключается в том, чтобы выделить ненужные столбцы или строчки (сквозным выделением) и нажатием правой кнопки мыши в контекстном меню выбрать действие «Скрыть».Показать скрытые строки или столбцы можно выделив нужный диапазон и выбрав в контекстном меню действие «Показать».
- Второй способ немного сложнее. Данный способ заключается в группировке строк или столбцов при помощи опции «Группировать» во вкладке «Данные» меню быстрого доступа. Эта опция позволяет разбить информацию на группы и открывать или прятать строки(столбцы) нажатием(кликом) по крестику. Преимущество этого метода в том, что можно создавать несколько уровней группировки и отображать при необходимость данные только определенного уровня. То есть информация открывается ступенчато в виде «древа».
Группировка данных осуществляется следующим образом:
- Необходимо выделить столбцы или строки сквозным выделением (для каждой группы отдельно);
- Кликнуть по пиктограмме «Группировка» в разделе «Данные». Информация будет сгруппирована автоматически.
Если Вам недостаточно автоматической группировки, можете использовать опцию «Создание структуры…».
Следует помнить, что группировка захватывает соседнюю с выделенным диапазоном ячейку, поэтому выделять нужно на одну ячейку меньше, либо следует вставить между группируемыми диапазонами пустые строки — разделители.
Вертикальное выравнивание
С вертикальным выравниванием намного больше проблем — по всей видимости, такое в CSS не было предусмотрено. Есть несколько способов добиться желаемого результата, но все они не очень красивые.
Выравнивание свойством line-height
В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство «line-height» и установив ему желаемую высоту. Для надежности стоит установить еще и «height», значение которого будет равно значению «line-height», потому что последние поддерживается не во всех браузерах.
Это фиолетовая строчка, высота которой равна высоте блока.
.example-wrapper4{
line-height: 100px;
color: #DC09C0;
background: #E5DAE1;
height: 100px;
text-align: center;
}
Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно «inline». К нему нужно применить «vertical-align: middle».
А это inline-элемент. Здесь несколько оранжевыхстрочек. Они выравниваятсяза счет установленной высоты строки блока-родителя.
.example-wrapper5 {
line-height: 160px;
height: 160px;
font-size: ;
background: #FF9B00;
}
.example-wrapper5 .text1{
display: inline-block;
font-size: 14px;
line-height: 1.5;
vertical-align: middle;
background: #FFFAF2;
color: #FF9B00;
text-align: center;
}
У блока обертки должно быть установлено «font-size: 0». Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.
Выравнивание по вертикали в таблицах
Свойство «vertical-align» также действует на ячейки таблицы. C установленным значением «middle», контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав «display: table-cell».
Обычно для выравнивания по вертикали пользуюсь именно этим вариантом. Ниже пример верстки, взятый из готового уже проекта. Интерес представляет именно картинка, которая центрируется по вертикали данным способом.
осталось 10 шт
307грн.($14.05)
осталось 7 шт
267грн.($16.79)
.one_product .img_wrapper {
display: table-cell;
height: 169px;
vertical-align: middle;
overflow: hidden;
background: #fff;
width: 255px;
}
.one_product img {
max-height: 169px;
max-width: 100%;
min-width: 140px;
display: block;
margin: 0 auto;
}
Следует помнить, что если у элемента установлено «float» отличное от «none», то он в любом случае будет блочным (display: block) — тогда придется использовать дополнительный блок-обертку.
Выравнивание дополнительным inline-элементом
И для inline-элементов можно применить «vertical-align: middle». При этом все элементы с «display: inline», которые находятся в одной строке, выровняются относительно общей центральной линии.
Нужно создать вспомогательный блок с высотой, равной высоте родительского блока, тогда и желаемый блок выровняется по центру. Для этого удобно использовать псевдоэлементы :before или :after.
.example-wrapper6{
height: 300px;
text-align: center;
background: #70DAF1;
}
.pudge {
display: inline-block;
vertical-align: middle;
background: url(pudge.png);
background-color: #fff;
width: 200px;
height: 200px;
}
.riki {
display: inline-block;
height: 100%;
vertical-align: middle;
}
CSS — Выравнивание по вертикали
1. Отцентровать один элемент (, ) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS .
HTML-код:
<div class="parent">
...
<div class="child">
...
</div>
</div>
CSS-код:
.parent {
line-height: 500px;
}
.child {
display: inline-block;
vertical-align: middle;
}
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
Браузеры, которые поддерживают данное решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Рамки и отрицательные отступы
Данный метод использует рамки колонок и отрицательные отступы для формирования иллюзии равной высоты колонок.
HTML
Разметка HTML ничем не отличается от предыдущих методов:
<div id="container"> <div id="sidebar"> <p>Боковая панель</p> </div> <div id="content"> <p>Основное содержание</p> </div> </div>
CSS
А вот код CSS более интересен. Контейнер имеет фиксированную ширину и центрируется на странице. А свойства для элементов #sidebar и #content имеют интересные значения:
#container {
width:960px;
margin: 0 auto;
}
#content {
float:left;
width:700px;
border-left: 260px solid #555;
}
#sidebar {
float: left;
width:260px;
margin-right: -260px;
position: relative;
}
Все цвета, которые используются в данном методе, устанавливаются в свойствах элемента #content. Для него устанавливается фоновый цвет и задается ширина рамки равной ширине боковой панели. Цвет рамки используется тот, который предполагается для фона боковой панели.
Если остановиться в задании свойств сейчас, то мы увидим, что цвета для колонок выставляются правильно, но боковая панель выталкивается основным содержанием за рамки экрана. Поэтому ее нужно вернуть обратно.
Первым шагом задаем для правого отступа боковой панели отрицательное значение равное её ширине. Так она задвигается обратно на экран. Проблема теперь в порядке наложения элементов друг на друга. Элемент #sidebar располагается сверху. Чтобы вернуть боковую панель наверх, устанавливаем для нее свойство .
Минусы:
- Боковая панель должна иметь фиксированное значение ширины, так как свойство воспринимает только абсолютные величины.
- Отрицательные значения отступов могут не восприниматься в старых версиях IE.
Display: flex и выравнивание
Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять «display: flex». Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать «margin: auto» для центрирования контента внутри.
Пока что такой способ практически не встречался мне, но особых ограничений для него нет.
.example-wrapper7{
display: flex;
height: 300px;
background: #AEB96A;
}
.example-wrapper7 img{
margin: auto;
}
Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!
Абсолютное позиционирование и растягивание
В коде примера выполняется центрирование по вертикали и горизонтали.
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
Идея данного метода заключается в том, чтобы растянуть вложенный элемент до всех 4 границ родительского элемента с помощью установки свойствам top, bottom, right, и left значения 0.
Установка автоматического формирования полей по всем сторонам приведет к заданию равных значений по всем 4 сторонам и выведет наш вложенный элемент div по центру родительского элемента.
К сожалению, данный метод не работает в IE7 и ниже.
Абсолютное позиционирование и отрицательные поля
Данный метод также работает во всех браузерах. Но он требует, чтобы центрируемому элементу задавалась высота.
В коде примера выполняется одновременное центрирование по горизонтали и вертикали:
CSS:
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Сначала устанавливаем тип позиционирования элементов. Затем для вложенного элемента div устанавливаем значения свойств top и left равными 50%, что соответствует центру родительского элемента. Но в центр попадает левый верхний угол вложенного элемента. Поэтому нужно поднять его вверх (на половину высоты) и сдвинуть влево (на половину ширины), и тогда центр совпадет с центром родительского элемента. Так что знание высоты элемента в данном случае необходимо. Затем задаем элементу отрицательные значения верхнего и левого полей равными половине высоты и ширины соответственно.
Данный метод работает не во всех браузерах.
display: table-cell
Для вертикального выравнивания применяется свойство display: table-cell родительскому блоку, которое заставляет элемент эмулировать ячейку таблицы. Ему же задается высота и vertical-align: middle:
<!DOCTYPE html>
<html>
<head>
<title>Вертикальное выравнивание. Способ display: table-cell</title>
<style>
.wrapper {
display: table-cell;
height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrapper">
Вертикально выравненная строка
</div>
</body>
</html>
Плюсы:
- Простота;
- Выравнивает как одну, так и несколько строк.
Минусы:
- Не работает в IE7 и ниже;
- Без дополнительных конструкций сложно манипулировать горизонтальным положением внешнего блока;
- Не всем нравится сам факт использования display: table-cell.
Вертикальное выравнивание строчных элементов
Предположим есть у вас строка текст, которая разбита строчными тегами <span> на части:
<span id="perviy">Вас</span> <span id="vtoroy">приветствует</span> <span id="tretiy">кусок</span> текста!
Для контейнеров <span> применим следующие свойства CSS:
#perviy{
vertical-align:sub;
}
#vtoroy{
vertical-align:3px;
}
#tretiy{
vertical-align:-3px;
}
В результате строка текста будет иметь вот такой вид:
Это и есть ничто иное, как выравнивание строчных элементов по вертикали, и свойство CSS vertical-align с этой задачей прекрасно справляется.
Мы немного отвлеклись, теперь возвращаемся к нашей основной задаче.
flexbox CSS
Flexbox — современный и очень гибкий способ расположения элементов на странице, который позволяет с легкостью создавать красивые интерфейсы, не засоряя код лишней разметкой и стилями. Я очень рекомендую вам им овладеть. В ближайших постах обязательно расскажу о нем подробнее.
Ну а пока вернемся к выравниванию по центру.
Теперь давайте разберемся, что все это значит.
display: flex
При помощи этого свойства преобразуем родительский элемент в так называемый гибкий контейнер (flex container), при этом все вложенные элементыпервого уровня (т.е. непосредственные дочерние элементы) становятся так называемыми гибкими элементами(flex items), и вместе это все составляет flexbox лэйаут.
justify-content: center
Это свойство выравнивает содержимое контейнера по центру вдоль основной оси. Одним из ключевых моментов в модели flexbox является ось, вдоль которой располагаются элементы контейнера (свойство ). Ось может быть либо горизонтальной ( или ), либо вертикальной ( или ). По умолчанию используется значение , т.е. наши элементы располагаются по горизонтальной оси слева направо.
align-items: center
Кроме основной оси в flexbox есть перпендикулярная ей второстепенная ось. В данном случае, она вертикальная. Свойство описывает, как элементы контейнера расположены относительно нее.
Вот примерно то, что должно получиться.
Преимущество этого метода в его лаконичности, адаптивности (я имею в виду респонсивность) и, конечно, гибкости. Так, например, если вам нужно, чтобы по центру был не один блок, а несколько — просто добавьте их в HTML, никаких изменений в CSS вносить при этом не нужно. Ну разве не прелесть?!
Как вы, наверное догадались я предпочитаю использовать именно этот способ. Но это не значит, что я не пользуюсь другими. Все эти способы можно и нужно использовать (за исключением способа с и display: table-cell ), каждый в своей ситуации. Например, незачем использовать flexbox если вам просто нужно .
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример использования CSS свойства text-align-last</title>
<style>
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 20%; /* устанавливаем ширину элемента */
margin : 0% 2%; /* устанавливаем внешние отступы для блоков (первое значение - верх/низ, второе - право/лево) */
text-align : justify; /* горизонтально выравниваем текст по ширине */
vertical-align : top; /* выравнивается по верху самого высокого элемента в строке (вертикальное позиционирование) */
}
.test {
text-align-last : left; /* последняя строка и абзац выравниваются по левому краю */
}
.test2 {
text-align-last : right; /* последняя строка и абзац выравниваются по правому краю */
}
.test3 {
text-align-last : center; /* последняя строка и абзац выравниваются по центру */
}
.test4 {
text-align-last : justify; /* последняя строка и абзац выравниваются по ширине */
}
</style>
</head>
<body>
<div class = "test">
<p>text-align-last : left;</p>
Ежовые — обитатели лесов, степей, пустынь и окультуренных ландшафтов. Селятся под корнями деревьев, в густом кустарнике, под камнями, роют норы.
</div>
<div class = "test2">
<p>text-align-last : right;</p>
Преимущественно всеядны, но предпочитают животные корма: беспозвоночных, амфибий, рептилий (ежи знамениты своей устойчивостью к змеиному яду), падаль.
</div>
<div class = "test3">
<p>text-align-last : center;</p>
Это преимущественно наземные животные, но многие виды хорошо лазают и плавают. В течение года 1—2 сезона размножения; вне их ежи ведут одиночный образ жизни.
</div>
<div class = "test4">
<p>text-align-last : justify;</p>
Беременность длится от 34 до 58 дней; детёнышей в помёте от 1 до 7. В природе на ежей охотятся многие хищники: лисы, волки, мангусты, хорьки, хищные птицы (особенно совы).
</div>
</body>
</html>
Пример использования CSS свойства text-align-last(задает горизонтальное выравнивание последней строки текста, а так же тексту перед принудительным разрывом строки).CSS свойства
Центровка в блоке переменной высоты
Очень часто встречается необходимость задать высоту блока класса textalign не в пикселах, а в процентах от высоты родительского блока, и выровнять содержимое div-контейнера по середине.
Загвоздка в том, что для ячейки таблицы невозможно этого сделать (а ведь блок класса textalign превращается именно в ячейку таблицы, благодаря свойству display:table-cell).
В этом случае необходимо использовать внешний блок, для которого указано CSS-свойство display:table и уже для него задавать процентное значение высоты. Тогда вложенный в него блок, с CSS-директивой display:table-cell, благополучно унаследует высоту родительского блока.
Для того, чтобы в нашем примере реализовать блок переменной высоты, мы немного подредактируем CSS:
Классу textalign мы изменим значение свойства display с table-cell на table и убирем директиву выравнивания vertical-align: middle. Теперь мы смело можем изменить значение высоты с 500 пикселов на, например, 100%.
Таким образом, CSS-свойства для блока класса textalign будут иметь следующий вид:
.textalign{
display: table;
width:500px;
height: 100%;
position: relative;
overflow: hidden;
border: 1px solid black;
}
Остается реализовать центрирование содержимого. Для этого div-контейнеру, вложенному в блок класса textalign (это тот самый желтый блок на рисунке), необходимо задать CSS-свойство display:table-cell, тогда он унаследует высоту в 100% от родительского блока textalign (фиолетовый блок). И нам ничто не помешает выровнять содержимое вложенного div-контейнера по центру свойством vertical-align: middle.
Получаем еще один дополнительный список CSS-свойств для блока div, вложенного в контейнер textalign.
.textalign div{
display: table-cell;
vertical-align: middle;
}
Вот и вся хитрость. При желании, вы можете посмотреть на сверстанный блок переменной высоты с отцентрованным содержимым.
Дополнительную информацию по вертикальному выравниванию блока переменной высоты можно получить тут.
