Выравнивание текста

Использование отступов

Е

ûø ôþñðòøÃÂàþÃÂÃÂÃÂÃÂÿ ú ÃÂûþàÃÂûõòð àÿþüþÃÂÃÂàÃÂòþùÃÂÃÂòð margin-left,
ÃÂþ òø÷ÃÂðûÃÂýþ ÃÂûþù ÃÂüõÃÂÃÂøÃÂÃÂàýð ÃÂúð÷ðýýþõ ÷ýðÃÂõýøõ òÿÃÂðòþ. ÃÂýðàÃÂøÃÂøýàÃÂûþÃÂ,
õóþ üþöýþ ÃÂüõÃÂÃÂøÃÂàÃÂðú, ÃÂÃÂþñàÃÂûþù ÃÂðÃÂÿþûðóðûÃÂàÿþ ÃÂõýÃÂÃÂàòõñ-ÃÂÃÂÃÂðýøÃÂÃÂ. ÃÂûÃÂ
ÃÂõóþ þà100%, ÃÂþÃÂÃÂðòûÃÂÃÂÃÂøàþñÃÂÃÂàôþÃÂÃÂÃÂÿýÃÂàÃÂøÃÂøýÃÂ, ýðôþ þÃÂýÃÂÃÂàÃÂøÃÂøýàÃÂûþÃÂ
ò ÿÃÂþÃÂõýÃÂðàø ÿþûÃÂÃÂõýýþõ ÷ýðÃÂõýøõ ÃÂð÷ôõûøÃÂàÿþÿþûðü. àõ÷ÃÂûÃÂÃÂðàø ñÃÂôõà÷ýðÃÂõýøõü
ÃÂòþùÃÂÃÂòð margin-left (ÿÃÂøüõÃÂà1).

ÃÂÃÂøüõà1. ÃÂÃÂÿþûÃÂ÷þòðýøõ margin-left

ÃÂðú òðÃÂøðýÃÂ, üþöýþ ýõ ÃÂúð÷ÃÂòðÃÂàÃÂøÃÂøýÃÂ, ð ÃÂõóÃÂûøÃÂþòðÃÂàõõ àÿþüþÃÂÃÂàþÃÂÃÂÃÂÃÂÿð
ÃÂûõòð ø ÃÂÿÃÂðòð (ÿÃÂøüõÃÂà2).

ÃÂÃÂøüõà2. ÃÂÃÂÿþûÃÂ÷þòðýøõ þÃÂÃÂÃÂÃÂÿþò

àôðýýþü ÿÃÂøüõÃÂõ ÿþúð÷ðýþ ÃÂð÷üõÃÂõýøõ ÃÂûþàÃÂøÃÂøýþù 40% ÿþ ÃÂõýÃÂÃÂÃÂ.
Ã¥þÃÂàÃÂðüð ÃÂøÃÂøýð ýøúðú ýðÿÃÂÃÂüÃÂàýõ ÷ðôðõÃÂÃÂÃÂ, þýð þÿÃÂõôõûÃÂõÃÂÃÂà÷ýðÃÂõýøõü ÃÂòþùÃÂÃÂò
margin-left ø margin-right. ÃÂýø ÃÂÃÂÃÂðýðòûøòðÃÂàþÃÂÃÂÃÂÃÂÿ ÃÂûõòð ø ÃÂÿÃÂðòð,
ÃÂÃÂþñàÃÂûþù ÃÂðÃÂÿþûðóðûÃÂàÿþ ÃÂõÃÂõôøýõ, øà÷ýðÃÂõýøàôþûöýàñÃÂÃÂàÃÂðòýÃÂ.

áûõôÃÂÃÂÃÂøù ÃÂÿþÃÂþñ ñþûõõ ÃÂýøòõÃÂÃÂðûõý ø ÃÂöõ ýõ ÷ðòøÃÂøàþàÃÂþóþ, úðúøõ õôøýøÃÂÃÂ
ø÷üõÃÂõýøàøÃÂÿþûÃÂ÷ÃÂÃÂÃÂÃÂàôûàÃÂÃÂÃÂðýþòúø ÃÂøÃÂøýÃÂ. ÃÂûàÃÂÃÂþóþ ÃÂÃÂõñÃÂõÃÂÃÂà÷ðôðÃÂàþÃÂÃÂÃÂÃÂÿ ÃÂûõòð ø ÃÂÿÃÂðòð ôûàÃÂûþàÃÂðòýÃÂü auto ÃÂõÃÂõ÷ ÃÂÃÂøûõòÃÂõ ÃÂòþùÃÂÃÂòð margin-left ø margin-right øûø ÃÂýøòõÃÂÃÂðûÃÂýþõ ÃÂòþùÃÂÃÂòþ margin (ÿÃÂøüõÃÂà3).

ÃÂÃÂøüõà3. ÃÂÃÂøüõýõýøõ ÷ýðÃÂõýøàauto

àôðýýþü ÿÃÂøüõÃÂõ ÃÂøÃÂøýð ÃÂûþàÃÂÃÂÃÂðýðòûøòðõÃÂÃÂà400 ÿøúÃÂõûþò ø òÃÂÃÂðòýøòðõÃÂÃÂÃÂ
ÿþ ÃÂõýÃÂÃÂààÿþüþÃÂÃÂà÷ýðÃÂõýøà0àauto ÃÂòþùÃÂÃÂòð margin. ÃÂõÃÂòÃÂù ðÃÂóÃÂüõýàÃÂÃÂÃÂðýðòûøòðõàýÃÂûõòþù þÃÂÃÂÃÂÃÂÿ þôýþòÃÂõüõýýþ ÃÂòõÃÂÃÂàø ÃÂýø÷àþàÃÂûþÃÂ, ð òÃÂþÃÂþù ðÃÂóÃÂüõýàòÃÂÃÂðòýøòðõàÃÂûþù ÿþ ÃÂõýÃÂÃÂàóþÃÂø÷þýÃÂðûø þúýð ñÃÂðÃÂ÷õÃÂð.

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством «padding».

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа. 

.example-wrapper1{
background: #535E73;
width: 200px;
height: 200px;
padding: 20px 50px;
}

Выравнивание абсолютно позиционированных блоков

Если для блока задано «position: absolute», тогда его можно позиционировать относительно ближайшего родителя с «position: relative». Для этого нужно всем свойствам («top»,»right»,»bottom»,»left») внутреннего блока присвоить одинаковое значение, а также «margin: auto».

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль). 

.example-wrapper2{
position: relative;
height: 250px;
background: url(space.jpg);
}

.cat-king{
width: 200px;
height: 200px;    
position: absolute;
top: ;
left: ;
bottom: ;
right: ;
margin: auto;
background: url(king.png);
}

Центрирование по вертикали

О

´Ã½Ã¸Ã¼ ø÷ ÃÂÿþÃÂþñþò ÿþúð÷ðÃÂàÿþÃÂõÃÂøÃÂõûàýðÿÃÂðòûõýýþÃÂÃÂàø ýð÷òðýøõ ÃÂðùÃÂð ÃÂòûÃÂõÃÂÃÂÃÂ
øÃÂÿþûÃÂ÷þòðýøõ ÃÂÿûÃÂÃÂ-ÃÂÃÂÃÂðýøÃÂÃÂ. íÃÂþ ÿõÃÂòðàÃÂÃÂÃÂðýøÃÂð, ýð úþÃÂþÃÂþù, úðú ÿÃÂðòøûþ,
ÃÂðÃÂÿþûþöõýð flash-÷ðÃÂÃÂðòúð øûø ÃÂøÃÂÃÂýþú, òÃÂÃÂðöðÃÂÃÂøù óûðòýÃÂàøôõàÃÂðùÃÂð. ÃÂ÷þñÃÂðöõýøõ
ÃÂðúöõ ÃÂòûÃÂõÃÂÃÂàø ÃÂÃÂÃÂûúþù ýð þÃÂÃÂðûÃÂýÃÂõ ÃÂð÷ôõûàÃÂðùÃÂð. âÃÂõñÃÂõÃÂÃÂàÿþüõÃÂÃÂøÃÂàÃÂÃÂþÃÂ
ÃÂøÃÂÃÂýþú ÿþ ÃÂõýÃÂÃÂàþúýð ñÃÂðÃÂ÷õÃÂð òýõ ÷ðòøÃÂøüþÃÂÃÂø þàÃÂð÷ÃÂõÃÂõýøàüþýøÃÂþÃÂð. ÃÂûÃÂ
ÃÂÃÂþù ÃÂõûø üþöýþ òþÃÂÿþûÃÂ÷þòðÃÂÃÂÃÂàÃÂðñûøÃÂõù àÃÂøÃÂøýþù ø òÃÂÃÂþÃÂþù ÃÂðòýþù 100% (ÿÃÂøüõÃÂà1).

ÃÂÃÂøüõà1. æõýÃÂÃÂøÃÂþòðýøõ ÃÂøÃÂÃÂýúð

àôðýýþü ÿÃÂøüõÃÂõ òÃÂÃÂðòýøòðýøõ ÿþ óþÃÂø÷þýÃÂðûø ÃÂÃÂÃÂðýðòûøòðõÃÂÃÂààÿþüþÃÂÃÂàÿðÃÂðüõÃÂÃÂð
align=»center» ÃÂõóð

,
ð ÿþ òõÃÂÃÂøúðûø ÃÂþôõÃÂöøüþõ ÃÂÃÂõùúø üþöýþ ýõ ÃÂõýÃÂÃÂøÃÂþòðÃÂÃÂ, ÿþÃÂúþûÃÂúàÃÂÃÂþ ÿþûþöõýøõ
÷ðôðýþ ÿþ ÃÂüþûÃÂðýøÃÂ.

çÃÂþñàòÃÂÃÂþÃÂð ÃÂðñûøÃÂàÃÂÃÂÃÂðýðòûøòðûðÃÂàúðú 100%, ýõþñÃÂþôøüþ ÃÂñÃÂðÃÂà, úþô ÿÃÂø ÃÂÃÂþü ÿõÃÂõÃÂÃÂðõàñÃÂÃÂàòðûøôýÃÂü.

ÃÂÃÂÿþûÃÂ÷þòðýøõ ÃÂøÃÂøýàø òÃÂÃÂþÃÂàýð òÃÂàôþÃÂÃÂÃÂÿýÃÂàþñûðÃÂÃÂàòõñ-ÃÂÃÂÃÂðýøÃÂàóðÃÂðýÃÂøÃÂÃÂõÃÂ,
ÃÂÃÂþ ÃÂþôõÃÂöøüþõ ÃÂðñûøÃÂàñÃÂôõàòÃÂÃÂðòýøòðÃÂÃÂÃÂàÃÂÃÂÃÂþóþ ÿþ ÃÂõýÃÂÃÂàþúýð ñÃÂðÃÂ÷õÃÂð, ýõ÷ðòøÃÂøüþ
þàõóþ ÃÂð÷üõÃÂþò.

ÃÂÃÂÃÂðòýøòðýøõ ÿþ óþÃÂø÷þýÃÂðûø

ÃÂð ÃÂÃÂõàÃÂþÃÂõÃÂðýøàðÃÂÃÂøñÃÂÃÂþò align (óþÃÂø÷þýÃÂðûÃÂýþõ
òÃÂÃÂðòýøòðýøõ) ø valign (òõÃÂÃÂøúðûÃÂýþõ òÃÂÃÂðòýøòðýøõ)
ÃÂõóð

, ôþÿÃÂÃÂÃÂøüþ ÃÂÃÂÃÂðýðòûøòðÃÂàýõÃÂúþûÃÂúþ
òøôþò ÿþûþöõýøù ÃÂûõüõýÃÂþò þÃÂýþÃÂøÃÂõûÃÂýþ ôÃÂÃÂó ôÃÂÃÂóð. ÃÂð ÃÂøÃÂ.à1 ÿþúð÷ðýàÃÂÿþÃÂþñÃÂ
òÃÂÃÂðòýøòðýøàÃÂûõüõýÃÂþò ÿþ óþÃÂø÷þýÃÂðûø.

àøÃÂ. 1. ÃÂÃÂÃÂðòýøòðýøõ ÃÂûõüõýÃÂþò ÿþ óþÃÂø÷þýÃÂðûø

àðÃÂÃÂüþÃÂÃÂøü ýõúþÃÂþÃÂÃÂõ ÿÃÂøüõÃÂàòÃÂÃÂðòýøòðýøàÃÂõúÃÂÃÂð ÃÂþóûðÃÂýþ ÿÃÂøòõôõýýþüàÃÂøÃÂÃÂýúÃÂ.

ÃÂÃÂÃÂðòýøòðýøõ ÿþ òõÃÂÃÂýõüàúÃÂðÃÂ

ÃÂûàÃÂúð÷ðýøàòÃÂÃÂðòýøòðýøàÃÂþôõÃÂöøüþóþ ÃÂÃÂõõú ÿþ òõÃÂÃÂýõüàúÃÂðÃÂ, ôûàÃÂõóð

ÃÂÃÂõñÃÂõÃÂÃÂàÃÂÃÂÃÂðýþòøÃÂàðÃÂÃÂøñÃÂàvalign ÃÂþ ÷ýðÃÂõýøõü
top (ÿÃÂøüõÃÂà2).

ÃÂÃÂøüõà2. ÃÂÃÂÿþûÃÂ÷þòðýøõ valign

àôðýýþü ÿÃÂøüõÃÂõ ÃÂðÃÂðúÃÂõÃÂøÃÂÃÂøúø ÃÂÃÂõõú ÃÂÿÃÂðòûÃÂÃÂÃÂÃÂààÿþüþÃÂÃÂàÿðÃÂðüõÃÂÃÂþò ÃÂõóð

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали
и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в
том, что абзац становится ровно таким широким, каким он должен быть
(если только мы явно не укажем ширину). В примере ниже мы именно
этого и хотим: мы размещаем по центру абзац из одного слова
(“Центр!“), так что ширина абзаца должна быть равна ширине этого
слова.

Центр!

Жёлтый фон наглядно демонстрирует, что абзац действительно той
же ширины, что и его содержимое. Мы подразумеваем, что разметка
осталась прежней:

Центр!

В плане вертикального центрирования эта таблица стилей схожа с
таблицей из предыдущего примера. Но теперь мы ещё перемещаем
элемент на полпути через контейнер с помощью правила ‘left: 50%’ и
одновременно сдвигаем его влево на половину своей собственной
ширины в преобразовании ‘translate’:

div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило
‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё
легче:

Центр!

с этой таблицей стилей:

div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }

CSS — Выравнивание блока по центру

1. Выравнивание одного блока по центру другого. При этом первый и второй блок имеют динамические размеры.

HTML-код:


  ...
  
    ...
  
  

CSS-код:

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Браузеры, которые поддерживают данное решение:

  • Chrome 4.0+
  • Firefox 3.6+
  • Internet Explorer 9+
  • Opera 10.5+
  • Safari 3.1+

2. Выравнивание одного блока по центру другого. При этом второй блок имеет фиксированные размеры.

.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  /* ширина и высота 2 блока */
  width: 500px;  
  height: 250px;
  /* Значения определяются в зависимости от его размера */
  /* margin-left = - width / 2 */
  margin-left: -250px;
  /* margin-top = - height / 2 */
  margin-top: -125px;
}

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

3. Выравнивание одного блока по центру другого. При этом второй блок имеет размеры, заданные в процентах.

.parent {
  position: relative;
}
.child {
  position: absolute;
  /* ширина и высота 2 блока в % */
  height: 50%;
  width: 50%;
  /* Значения определяются в зависимости от его размера в % */
  left: 25%; /* (100% - width) / 2 */
  top: 25%;  /* (100% - height) / 2 */
}

Браузеры, которые поддерживают данное решение:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

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

Вы можете комбинировать представленные выше техники для того чтобы получить идеально выравненные по центру элементы. Но обычно их можно разделить на 4 группы:

Выравнивание элемента с фиксированной шириной и высотой

Использование отрицательных отступов () равных половине этой ширины и высоты после абсолютного позиционирования элемента / выравняют элемент по центру. У этого способа достаточно хорошая кроссбраузерная поддержка:

Выравнивание элемента с неизвестной шириной и высотой

Если вы не знаете ширину или высоту элемента, то можете использовать свойство и отрицательный в в обоих направлениях (в зависимости от текущей ширины / высоты элемента) до центра:

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

Выравнивание элемента с помощью CSS Grid

Это просто небольшой трюк (присланный Lance Janssen), который в большей степени будет работать для одного элемента:

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

С вертикальным выравниванием намного больше проблем — по всей видимости, такое в 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 vertical align

Когда я только начинал работать в области веб-разработки, то немного помучился с этим свойством. Я думал, что оно должно работать, как классическое свойство “text-align”. Ах, если бы все было так просто…

CSS свойство vertical-align отлично работает с таблицами, но не с div или другими элементами. Когда вы используете его для div, то оно выравнивает элемент относительно других блоков, но не его содержимое. При этом свойство работает только с display: inline-block;.

Посмотрите пример

Мы хотим центрировать контент, а не сам div!

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

Правда у этого подхода CSS выравнивания по вертикали есть недостаток. Если текст многострочный, тогда высота строки будет умножена на количество строк. Скорее всего, в этом случае, у вас получится ужасно сверстанная страница.

Взгляните на этот пример

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

Чтобы это работало, должен быть родительский контейнер с display: table, а внутри него – нужное количество столбцов, которое вы хотите центрировать с помощью display: table-cell и vertical-align: middle.

Посмотрите пример

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

Свойство position

Начнем с основ выравнивания по вертикали CSS div:

  • position: static — это значение по умолчанию. Элемент отображается в соответствии с порядком HTML;
  • position: absolute — используется, чтобы определить точное положение элемента. Эта позиция всегда связана с ближайшим относительно позиционированным родительским элементом (не static). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, полностью игнорируя поток документа. По умолчанию элемент отображается в левом верхнем углу;
  • position: relative — используется для позиционирования элемента относительно его нормального положения (статического). Это значение сохраняет порядок потока документа;
  • position: fixed — используется для позиционирования элемента относительно окна браузера, поэтому он всегда отображается в области просмотра.

Примечание: некоторые свойства (top и z-index) работают только в том случае, если для элемента задано значение position (не static).

Давайте приступим к делу!

Вы хотите осуществить CSS выравнивание по центру по вертикали? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

Второй шаг может быть различным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:

  • Старое свойство: нужно знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите пример;
  • Новое свойство CSS3: можно добавить свойство transform со значением translate 50% и блок всегда будет в центре. Посмотреть пример.

В принципе, если вы хотите центрировать контент, никогда не используйте top: 40% или left: 300px. Это прекрасно работает на тестовых экранах, но это не центровка.

Помните position: fixed? Можно сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента — она всегда будет позиционировать относительно окна браузера.

Вы слышали о спецификации flexbox?

Можно использовать flexbox. Это гораздо лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали. С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что нужно отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

Посмотреть пример

Используя flexbox расположение, можно центрировать несколько блоков.

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

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

Изучение CSS разметки

FlexBox Froggy

Песочница flexbox

Данная публикация представляет собой перевод статьи «CSS Vertical Align for Everyone (Dummies Included)» , подготовленной дружной командой проекта Интернет-технологии.ру

Видимый беспорядок внутри текстового блока

Да-да, чем ровнее края текстового блока, тем очевиднее бардак внутри него. В типографском деле стройности текста позволяет добиться целый арсенал инструментов: переносы, регулировка интервалов между словами и расстояний между буквами и даже чуть более широкие или чуть более узкие варианты шрифта. А вот макет интернет-страницы предполагает, как правило, только один способ «растянуть» строку от края до края — неконтролируемое увеличение ширины пробелов. Мало того, что это приводит к появлению неприглядных зазоров между словами, так эти зазоры, словно по закону подлости, частенько приходятся примерно на одно и то же место в каждой строке, образуя так называемые вертикальные «реки». Все это придает тексту весьма неопрятный вид.

Как выровнять картинку по правому краю

по умолчаниюtext-alignmargin-leftfloatpositiondisplayДлинный абзац с несколькими предложениями. Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.

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

Свойство не наследуется, применяется ко всем элементам. У него есть значение , которое выравнивает блочный элемент по горизонтали. А именно прижимает элемент к правому краю родителя. Это положение может изменяться свойством . При и элемент размещается по центру ширины предка.

Свойство не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.

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

Свойство не наследуется, применяется ко всем элементам. Элемент со значением подобен тегу , а —

Также стоит обратить внимание на значение .

Длинный абзац с несколькими предложениями.  Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.
Свойство  наследуется, применяется к блочным элементам. Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе , позволяющих сдвигать содержимое вправо.
Свойство  не наследуется, применяется ко всем элементам.  У него есть значение , которое выравнивает блочный элемент по горизонтали. А именно  прижимает элемент к правому краю родителя. Это положение может изменяться свойством . При  и  элемент размещается по центру ширины предка.
Свойство  не наследуется, применяется ко всем элементам.  Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.
Свойство  не наследуется, применяется ко всем элементам.  вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение  отлично от , с помощью свойств , , , . При  свойство  имеет приоритет над свойством , кроме случаев, когда свойство  имеет значение .
  
Свойство  не наследуется, применяется ко всем элементам. Элемент со значением  подобен тегу , а  — .
  

Выравнивание элементов формы

С

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

Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы
формы — по левому, потребуется таблица с невидимой границей и двумя
колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые
поля (пример 5).

Пример 5. Выравнивание полей формы

В данном примере, для тех ячеек, где требуется задать выравнивание по правому
краю, добавлен атрибут align=»right».
Чтобы надпись «Комментарий» располагалась по верхней границе многострочного
текста, для соответствующей ячейки устанавливается выравнивание по верхнему
краю с помощью атрибута valign.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных
элементов является область просмотра. (В случае c браузером это
окно браузера). Таким образом, центрирование элемента в области
просмотра не вызывает сложности. Далее приведен полный пример. (В
этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном
документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left:
50%’. Правило ‘left’ уменьшает доступную для элемента ширину на
50%. Поэтому визуализатор постарается сделать линии длиною не более
половины ширины контейнера. Указав на то, что правое поле элемента
находится правее на ту же самую величину, отметим, что максимальная
длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое
предложение находится на одной строке, когда окно достаточно
широкое. Только тогда, когда окно слишком узкое для всего
предложения, это предложение будет разбито на несколько строк.
Когда вы удалите правило ‘margin-right: -50%’ и снова измените
размер окна, вы заметите, что предложения будут уже разбиты, хотя
окно все еще шире строк текста в два раза.

Ссылка на основную публикацию