Horizontal and vertical alignment of css blocks. A Complete Guide to Centering a DIV Element

Property CSS vertical-align is responsible for the vertical alignment of text and pictures on the page. The important feature is that it only works with table elements, inline and inline-block elements. Supported by all modern browsers.

Syntax CSS vertical-align

... vertical-align : value ; ...

• baseline - alignment to the baseline of the ancestor (or simply the lower boundary of the parent)
• bottom - align to the bottom of the line (or the element that is located below all)
• middle - align the element's midpoint to the parent's baseline plus half the parent's height
• sub - display occurs below the line (looks like a subscript)
• super - display occurs above the line (as a superscript)
• text-bottom - align the bottom border of the element to the bottom edge of the line
• text-top - align the top border of the element to the top edge of the line
• top - align the top edge of the element to the top of the tallest element in the line
• inherit - inherits the value of the parent
• value - indicated in pixels. A positive number shifts upward relative to the baseline. Negative down
• interest - indicated in percentages. A positive number shifts upward relative to the baseline. Negative down

Default vertical-align value:

• baseline (for inline elements)
• middle (for table cells)

Vertical alignment in tables

The most common use of vertical-align is in table cells. In the tag

use the valign attribute.

CSS valign syntax for tables

Where value can take the following values:

• baseline - alignment to the first baseline text string
• bottom - align to the bottom edge of the table cell
• middle - alignment to the middle of the cell
• top - align to the top edge of the cell

For example:

or

Align to top

Center alignment

Bottom alignment

Align to top

Center alignment

Bottom alignment

Examples with vertical alignments

Example 1. Vertical-align values: baseline, bottom, top, sub

Текст с выравниванием vert_align_baseline
Текст с выравниванием vert_align_bottom
Текст с выравниванием vert_align_top
Текст с выравниванием vert_align_sub

Пример 2. Значения vertical-align: абсолютные значения и проценты

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

Преобразуется на странице в следующее:

Исходная строка. Текст с выравниванием на 10 пикселей вверх
Исходная строка. Текст с выравниванием на 5 пикселей вниз
Исходная строка. Текст с выравниванием на 50% вверх
Исходная строка. Текст с выравниванием на 30% вниз

Примечание

Значение vertical-align: middle не выравнивает строчный элемент по центру самого большого элемента в строке (что можно было бы ожидать). Вместо этого значение middle выравнивает элемент относительно гипотетичной строчной буквы "X" (также называемой x-высотой).

Для обращения к vertical-align из JavaScript нужно писать следующую конструкцию:

object.style.verticalAlign ="VALUE "

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

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

Постановка задачи: Необходимо выровнять содержимое блока переменной высоты по центру относительно вертикали.

Теперь приступим к решению поставленной задачи.

И так, у нас есть блок, высота его может меняться:

Первое, что приходит в голову – это сделать следующий финт:

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

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

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

Вертикальное выравнивание строчных элементов

Предположим есть у вас строка текст, которая разбита строчными тегами на части:

Вас приветствует кусок текста!

Под строчным тегом понимается контейнер, появление которого не приводит к переносу содержимого на новую строку.

Действие же блочного тега приводит к переносу содержимого контейнера на новую строку.

– это блочный тег. Если мы заключим куски текста в блоки

, то каждый из них окажется на новой строке. Используя тег , который, в отличие от

, является строчным, переноса контейнеров на новую строку не будет, все контейнеры останутся в одной строке.

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

Для контейнеров применим следующие свойства CSS:

#perviy{ vertical-align:sub; } #vtoroy{ vertical-align:3px; } #tretiy{ vertical-align:-3px; }

В результате строка текста будет иметь вот такой вид:

Это и есть ничто иное, как выравнивание строчных элементов по вертикали, и свойство CSS vertical-align с этой задачей прекрасно справляется.

Мы немного отвлеклись, теперь возвращаемся к нашей основной задаче.

Выравнивание по вертикали в div-контейнере

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

Как же мы сможем это использовать? У нас же нет таблицы, мы работаем с div-контейнером.

Ха, оказывается очень просто.

CSS-свойство display позволяет превратить наш блок div в ячейку таблицы, сделать это можно легко и непринужденно:

Пусть у нас есть div класса textalign:

Для данного блока указываем следующее CSS-свойство:

Textalign{ display: table-cell; }

Эта CSS-инструкция чудесным образом превратит наш блок div в ячейку таблицы, визуально никак его не изменив. А для ячейки таблицы мы сможем применять свойство vertical-align в полной мере и будет работать желаемая центровка по вертикали.

Однако, все так просто закончится не может. У нас же есть замечательный браузер IE. Он не умеет работать со свойством display: table-cell (предлагаю вам ознакомится с табличкой, иллюстрирующей работоспособность данного CSS-свойства в разных браузерах на сайте htmlbook.ru). Поэтому нам придется идти на различные ухищрения.

Существует множество способов добиться выравнивания в div-контейнере для всех браузеров:

• Способ с применением дополнительного вспомогательного div-котнейнера
• Способ с использованием expression-а . Связан он с хитрым вычислением высот блоков. Без знания JavaScript тут не обойтись.
• Использование свойства line-height . Данный способ подходит только для вертикального выравнивания в блоке известной высоты, а значит в общем случае не применим.
• Использование абсолютного и относительного смещения содержимого в случае браузера IE. Мне этот способ кажется наиболее понятным и простым. Кроме того, он реализуем для div-контейнера переменной высоты. На нем мы остановимся подробнее.

Как вы понимаете, нам остается решить проблему вертикального выравнивания в IE, связанную с его непониманием свойства display: table-cell (ни IE6, ни IE7, ни IE8 с этим свойством не знакомы). Поэтому воспользовавшись условным комментарием специально для браузеров семейства IE мы укажем другие свойства CSS.

Условный комментарий

Конструкция вида:

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

называется условным комментарием (будьте внимательны, вид условного комментария должен полностью соответствовать приведенному примеру, с точностью до пробела).

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

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

Решение задачи

Из-за всей этой петрушки нам нужно будет снабдить наш HTML-код двумя дополнительными контейнерами. Вот каким образом будет выглядеть наш блок с текстом:

Для div-контейнера класса textalign задаются CSS-свойства, которые выравнивают его содержимое по вертикали для всех нормальных браузеров (кроме IE, разумеется):

Display: table-cell; vertical-align: middle;

И еще два свойства, которые задают ширину и высоту для блока:

Width:500px; height: 500px;

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

Теперь начинаем дописывать свойства, связанные с выравниванием для браузеров семейства IE (именно для них мы использовали дополнительные блоки div и span ):

Обращаемся к тегу div внутри блока класса textalign . Для этого нужно указать сначала название класса, а потом, через пробел, тег, к которому мы обращаемся.

Textalign div{ position: absolute; top: 50%; }

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

Соответственно, стили заданные для блока textalign видоизменяются:

Textalign{ display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; }

Теперь левая верхняя точка текстового блока смещена вниз на 50%.

Для пояснения происходящего я нарисовал иллюстрацию:

Как видно из картинки, определенного прогресса мы добились. Но это еще не все! Верхняя левая точка желтого блока действительно сместилась на 50% вниз, относительно родительского (фиолетового) блока. Но нам-то нужно, чтобы на пятидесяти процентах высоты фиолетового блока находился центр желтого блока , а не его верхняя левая точка.

Теперь в ход пойдет тег span и его относительное позиционирование:

Textalign span{ position: relative; top: -50%; }

Тем самым, мы сместили желтый блок вверх на 50% его высоты, относительно начального положения. Как вы понимаете, высота желтого блока равна высоте центрируемого контента. И последняя операция со span-контейнером расположила наш контент посередине фиолетового блока. Ура!

Немного подшаманим

Перво-на-перво нам нужно спрятать петрушку от всех нормальных браузеров и открыть ее для IE. Сделать это можно, конечно же, при помощи условного комментария, не зря мы с ним знакомились:

There is a small problem. If the centered content is too high, it results in unpleasant consequences: Extra vertical scroll height appears.

Solution to the problem: need to add a property overflow: hidden block textalign.

Get to know the property in detail overflow possible in .

The final CSS instructions for the block textalign has the form:

Textalign( display: table-cell; vertical-align: middle; width:500px; height: 500px; position: relative; overflow: hidden; border: 1px solid black; )

Sorry, I forgot to mention one important point. If you try set the height of the class block textalign as a percentage, then you have nothing will work.

Centering in variable height block

Very often there is a need to set the height of a class block textalign not in pixels, but as a percentage of the height of the parent block, and align the contents of the div container in the middle.

The catch is that it is impossible to do this for a table cell (but the class block textalign turns exactly into a table cell, thanks to the property display:table-cell).

In this case, you must use an external block for which the CSS property is specified display:table and already set the percentage value of the height for it. Then the block nested in it, with the CSS directive display:table-cell, will happily inherit the height of the parent block.

In order to implement a variable height block in our example, we will edit the CSS a little:

To the class textalign we will change the property value display With table-cell on table and remove the alignment directive vertical-align: middle. Now we can safely change the height value from 500 pixels to, for example, 100%.

So the CSS properties for the class block textalign will look like this:

Textalign( display: table; width:500px; height: 100%; position: relative; overflow: hidden; border: 1px solid black; )

All that remains is to implement content centering. To do this, a div container nested in a class block textalign(this is the same yellow block in the picture), you need to set the CSS property display:table-cell, then it will inherit the height of 100% from the parent block textalign(purple block). And nothing will stop us from aligning the contents of the nested div container in the center with the property vertical-align: middle.

We get another one additional list CSS properties for div block nested in a container textalign.

Textalign div( display: table-cell; vertical-align: middle; )

That's the whole trick. If desired, you can have a variable height with the content centered.

For more information on vertical alignment of a variable height block, see .

Align text vertically in CSS- a very difficult job. I've seen enough people struggle with this that I keep finding "critical" errors when it comes to actual responsive design.

But fear not: if you're already struggling with CSS vertical alignment, you've come to the right place.

Let's talk about the CSS vertical align property

When I first started working in web development, I struggled a bit with this property. I thought it should work like a classic property" text-align" Oh, if only everything were so simple...

vertical-align CSS property works great with tables, but not with divs or other elements. When you use it on a div, it aligns the element relative to other divs, but not its content. In this case, the property only works with display: inline-block; .

See example

We want to center the content, not the div itself!

You have two options. If you only have div elements with text, then you can use the line-height property. This means that you need to know the height of the element, but you cannot set it. This way your text will always be in the center.

The truth about this approach CSS vertical alignment there is a drawback. If the text is multi-line, then the line height will be multiplied by the number of lines. Most likely, in this case, you will end up with a terribly laid out page.

Take a look at this example

If the content you want to center consists of more than one line, then it is better to use table divs. You can also use tables, but this is not semantically correct. If you need breaks for responsive purposes, it's better to use div elements.

For this to work, there must be a parent container with display: table and inside it the desired number of columns that you want to center using display: table-cell and vertical-align: middle .

See example

Why does this work with table markup but not with div elements? Because the rows in the table have the same height. When a table cell's content does not use all the available height space, the browser automatically adds vertical padding to center the content.

position property

Let's start with the basics of CSS div vertical alignment:

• position: static is the default. The element is rendered according to HTML order;
• position: absolute - used to determine the exact position of an element. This position is always related to the closest relatively positioned parent element (not static). If you don't determine the exact position of an element, you will lose control of it. It will appear randomly, completely ignoring the flow of the document. By default, the element appears in the upper left corner;
• position: relative - used to position an element relative to its normal position (static). This value preserves the document flow order;
• position: fixed - used to position the element relative to the browser window so it is always visible in the viewport.

Note: some properties ( top and z-index) only work if the element is set to position (not static).

Let's get down to business!

Do you want to implement CSS vertical center alignment? First create an element with relative position and dimensions. For example: 100% in width and height.

The second step may vary depending on the target browsers, but you can use one of two options:

• Old property: need to know the exact size of the window to remove half the width and half the height. See example;
• New CSS3 Property: You can add a transform property with a translate value of 50% and the block will always be in the center. View example.

Basically, if you want to center content, never use top: 40% or left: 300px . This works fine on test screens, but it is not centered.

Remember position: fixed ? You can do the same thing with it as with an absolute position, but you don't need a relative position for the parent element - it will always be positioned relative to the browser window.

Have you heard of the flexbox specification?

You can use flexbox. This is much better than any other option align text to CSS center vertically. With flexbox, managing elements is like child's play. The problem is that some browsers need to be discarded, such as IE9 and versions below. Here's an example of how to vertically center a block:

View example

Using a flexbox layout, you can center multiple blocks.

If you apply what you learn from these examples, you can master CSS vertical block alignment as soon as possible.

Links and further reading

Learning CSS markup

FlexBox Froggy

Flexbox sandbox

Translation of the article “ CSS Vertical Align for Everyone (Dummies Included)” was prepared by the friendly project team.

Often during layout there is a need for vertical alignment of text in a block. If this needs to be done in a table cell, then the value of the vertical-align CSS property is set.

But a reasonable question arises: is it possible to do without a table, without overloading the page layout with unnecessary tags? Answer: “you can”, but because of bad CSS support MSIE browser, the solution to the problem for it will be different from the solution for other common browsers.

As an example, consider the following fragment:

and try to vertically align the text to the center of the block and to the bottom edge of the block.

The solution of the problem

"Correct" browsers (including MSIE

Majority modern browsers support CSS2.1, namely the table-cell value for the display property. This gives us the opportunity to force a block of text to appear as a table cell and, taking advantage of this, align the text vertically:

div(
display: table-cell;
vertical-align: middle;
}

div(
display: table-cell;
vertical-align: bottom;
}

Internet Explorer (up to version 7 inclusive)

You can solve the problem of aligning text to the bottom edge of a block in MSIE using absolute positioning (here we will need a string element embedded in a block):

div(
position: relative;
}
div span(
display: block;
position: absolute;
bottom: 0%;
left: 0%;
width: 100%;
}

This set of rules also works in “correct” browsers.

Specify properties

Div span(
display: block;
width: 100%;
}

not necessary, but they may be needed if, in addition to vertical text alignment, you also plan to use horizontal alignment, for example, text-align: center ;.

To vertically align the text to the center of the block, the original fragment will still have to be complicated - we will introduce another line element:

Material to study:

• Vertical Centering in CSS (www.jakpsatweb.cz/css/css-vertical-center-solution.html)
• Vertical centering using CSS (www.student.oulu.fi/%7Elaurirai/www/css/middle/)
• Vertical align (www.cssplay.co.uk/ie/valign.html)
• vertical-align:middle (cssing.org.ua/2005/07/14/vertical-align-middle/)
• Another method of vertical alignment in CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Aligning various elements, like on a website or page, is initially a difficult task for some, as the vertical alignment of text is affected. Oddly enough, one of the most complicated ways using CSS is to center the content. Centering content horizontally is relatively easy at some points in time. Centering content vertically is almost always difficult. Centering a different element that needs to be aligned vertically using CSS. This is definitely a very frequently asked question that creates problems for designers and web masters. However, there are many methods for performing vertical centering, and each of them is quite easy to use.

If you've ever tried it, it's tricky, especially if you want to avoid using tables. Luckily, our cries for help have been heard, and one of the new weapons added to the CSS arsenal to solve this problem is a type of layout known as a flexible box layout. As you'll find out in a few moments, it provides you with some really great features to simplify complex layouts. Some of this great functionality also allows you to center your content vertically and horizontally, and that's what we'll cover in this tutorial. You can do this with padding to some extent, but it may take your layout to smaller screens. Adding a custom CSS class to your stylesheet means you can vertically center any content in seconds.

Horizontal alignment defines how the left and right edges of a paragraph line up between the left and right edges of the text box. Vertical alignment determines the vertical placement of the character in the text field. Absence good ways vertically centering elements in CSS has been a dark flaw in its reputation for pretty much its entire existence.

First method with line-height

The first method is simple and somewhat banal, but it has its drawbacks that will limit its use. When coding html pages for a website line spacing text content is probably one of the attributes that is usually left as default. In general, we need to set the height of the line itself, which comes with a similar height for the block where it is used line-height property.

CSS

Constutesim_first(
border: 2px solid #bf1515;
height: 175px;
}
.constutesim_first > p(
line-height:175px;
margin:0;
text-align:center;
padding: 0;
font-size: 17px;
color: #3152a0;
font-family: Tahoma;
font-weight: bold;
}

You can also immediately see how everything will look in reality.

Using a similar method, it is possible to realize how to position the image, which will be in the center and certainly vertical. Here all that remains is to specify one property: vertical-align: middle; which is responsible for displaying the image.

CSS

Second-variation(
border: 2px solid red;
line-height:158px;
}

Second-variation div(
text-align:center;
}
.second-variation img (
vertical-align: middle;
border: 0px solid #3a3838;
}

We implement centered and vertical snapshots of images.

Alignment with position property

This is probably the best known method, but most common in application to use with using CSS. But here we need to add that it is also not ideal and this method also has its own small nuances that are associated with the center of the element, which if it is set as a percentage, it will be centered on the left side of the top side, inside the blog itself.

CSS

Competaird-option (
border: 2px solid #d40e0e;
height: 162px;
position: relative;
}
.competaird-option div (
position: absolute;
top: 50%;
left: 50%;
height: 28%;
width: 49%;
margin: -2% 0 0 -25%;
border: 2px solid #4a4848;
}

Line spacing or line height is the vertical height between lines of text in shaded HTML page. Almost always this distance value is set to an appropriate value by the browser or rendering engine. This value usually depends on the font of the page being displayed and other factors.

Alignment with table property

In this method, we use the proven and old method, where we transform the elements into a table in which the cells are located. As for the tag called table, it will not be used here; here we will set completely different CSS properties, this is display: table;, display: table-cell;. If we talk about the oldest versions of IE, then the data will simply not be displayed here. I hope you have updated your browser, as it is no longer relevant and displays almost everything incorrectly.

Cherevert-variation (
border: 2px solid #c30b0b;
height: 173px;
display: table;
width: 100%;
font-size: 17px;
font-weight: bold;
color: #3945a0;
}

Cherevert-variation div(
display: table-cell;
vertical-align: middle;
text-align:center;
}

First of all, let's see what is the default that is used by most browsers. Most modern daytime browsers have line spacing.

Alignment with flex property

Here we come to a more original version, which has its own properties that can rarely be found in the layout of an Internet resource. But they are still used, and in some cases they are useful. This sets the main axis so the direction flex item definition is placed in the container floppy disks.

CSS

Variant-horizontal (
border: 2px solid #d20c0c;
height: 147px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: bold;
color: #49518c;
}

You can specify a value for row-height the same way you would specify any other size in css, either as a number, pixel size, or percentage.

Alignment with transform property

And now we have come to the most extreme method, but not to the most recent application in the use of its web design. Everything is simple here, you need to shift the specified element vertically to the value you need. Property transform, this is a list of transformations that the installer applies when installing the package. The installer applies the transformations in the same order as they are specified in the property.

CSS

Vertical-medilpasudsa (
border: 2px solid #e00a0a;
height: 158px;
font-size: 19px;
font-weight: bold;
color: #353c71;
}
.vertical-medilpasudsa > div(
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
}

When you specify values ​​as a number, it will use the current font size as a base. The current font size is multiplied by the number you specify to calculate the line height or space between lines.

If you want to center characters horizontally in an element, you should use text-align: center. One option is if you want to center it vertically and you have a fixed header footer and one row of text, set the line height to be the same as the height of your footer.

If you need to center text within an element such as a div, header or paragraph, you can use the text-align CSS property.

Text-align has several valid properties:

Center: Texture is centered;
left: Will be aligned to the left side of the container;
right: Aligned to the right side of the container
justify: Forced to align with both the left and right edges of the container, with the exception of the outermost lines;
justify-all: Makes the extreme line justify the signs;
start: The same as on the left, only if the direction goes from left to right. But it will be correct if you initially set the text direction, which will happen from right to left;
End: The opposite of the beginning;
match-parent: Similar to inheritance, except for start and end, it is calculated relative to the parent element;

Use these properties to align text within a parent or wrapper div. If you want to center text horizontally in an element, you should use text-align: center.

One option is if you want to center it vertically, if you have a fixed header footer and one row of text, set the line height to be the same as the height of your footer.