Vertical alignment in div. Bonus: conditional comments
Everyone who deals with layout sooner or later is faced with the need to align elements vertically... and they know what difficulties can arise when aligning an element to the center. In CSS there is a property `vertical-align` with many values which, logically, should perform vertical alignment. However, in practice it doesn't work at all as expected.
There are several techniques to solve this problem. Below we will take a closer look at each of them.
1. Alignment using a table
In this case, we replace the outer block with a single-cell table. The alignment will be applied to the contents of the cell, that is, the inner block.
HTML
CSS
Outer ( width : 200px ; height : 200px ; text-align : center ; vertical-align : middle ; background-color : #ffc ; )
The main disadvantage of this solution, from a semantic point of view, is the use of the table for other purposes than its intended purpose. The second disadvantage is that creating a table requires adding another element around the outer block.
The first disadvantage can be partially avoided by replacing the table tags with divs and setting the table display mode in CSS.
HTML
CSS
Outer-wrapper ( display : table ; ) .outer ( display : table-cell ; )
2. Alignment using indents
Provided that we know the heights of the inner and outer blocks, the alignment can be set using the vertical indents of the inner block using the formula: (H outer – H inner) / 2.
CSS
Outer (height: 200px;).inner (height: 100px; margin: 50px 0;)
The downside of the solution is the mandatory knowledge of the height of both blocks.
3. Alignment using line-height
If the inner block occupies no more than one line of text, then you can use the line-height property and set it equal to the height of the outer block. Since the content of the inner block should not wrap to the second line, it is advisable to also add the white-space: nowrap and overflow: hidden rules.
CSS
Outer ( height : 200px ; line-height : 200px ; ) .inner ( white-space : nowrap ; overflow : hidden ; )
This method can also be used to align multiline text. To do this, the inner block needs to override the line-height value, and also add the display: inline-block and vertical-align: middle rules.
CSS
Outer ( height : 200px ; line-height : 200px ; ) .inner ( line-height : normal ; display : inline-block ; vertical-align : middle ; )
The disadvantage of this method is that the height of the external block must be known.
4. Alignment using “stretching”
This method can be used when the height of the internal block is known to us, but the external one is not.
To apply this method we need:
- Set the outer block to relative positioning position: relative , and the inner block to absolute position: absolute ;
- Add several top: 0 and bottom: 0 rules to the inner block, as a result of which it will stretch to the entire height of the outer block;
- Set the vertical padding of the internal block to auto .
CSS
Outer ( position : relative ; ) .inner ( height : 100px ; position : absolute ; top : 0 ; bottom : 0 ; margin : auto 0 ; )
5. Alignment with negative margin-top
Similar to the previous one, this method is used when the height of the external block is unknown, but the height of the internal one is known.
You need to set the external block to relative positioning, and the internal block to absolute positioning. Then move the inner block down by half the height of the outer block top: 50% and raise it up by half its own height margin-top: -H inner / 2 .
CSS
Outer ( position : relative ; ) .inner ( height : 100px ; position : absolute ; top : 50% ; margin-top : -50px ; )
The disadvantage of this method is that the height of the indoor unit must be known.
6. Alignment using transform
The method can be used when the height of the indoor unit is unknown. You need to move the inner block down by half the height of the outer block top: 50% , then use the transform property and move it back up using the translateY(-50%) function.
CSS
Outer ( position : relative ; ) .inner ( position : absolute ; top : 50% ; transform : translateY (-50% ); )
7. Alignment with a pseudo-element
This is the most universal method that can be used when the heights of both blocks are unknown.
The essence of the method is to add an inline-block with a height of 100% inside the outer block and assign it vertical alignment. Thus, the height of the added block will be equal to the height of the outer block. The indoor unit will be aligned vertically relative to the added unit, and therefore the external unit.
In order not to violate semantics, it is advisable to add an inline block using the before or after pseudo-elements.
CSS
Outer :before ( display : inline-block ; height : 100% ; vertical-align : middle ; content : "" ; ) .inner ( display : inline-block ; vertical-align : middle ; )
The disadvantage of this method is that it cannot be used with absolute positioning of the indoor unit.
8. Alignment with Flexbox
The most modern method of vertical alignment is the use of Flexible Box Layout (or Flexbox). It allows you to flexibly control the positioning of elements on the page, arranging them almost anywhere. Center alignment for Flexbox is a very simple task.
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 center text alignment CSS 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.
Aligning elements on a web page can be a challenging task, especially when it comes to vertically aligning text. This question is often found on forums, and solving this issue is especially difficult for novice users. But in reality there is nothing complicated here. All you need is a little knowledge of CSS Cascading Style Sheets. Since this is all done due to its rules.
Vertical text alignment can be achieved in at least five different ways. Each of them is good in its own way, given the circumstances and details of the situation. We will look at several examples, and based on the conditions, you will choose the appropriate rotation for yourself.
First method with line-height
The first method is very banal and has a big drawback, which limits its application. But still, whatever one may say, it can be useful and even bring the desired result. This will be a conditional alignment since we are essentially setting the line height to match the block height using the line-height property.
first example. demo #1
first example. demo #1
/* No.1 */ .talign1( border: 1px solid red; height:200px;/* block height */ ) .talign1 > p( line-height:200px;/* set the line height according to the block height */ margin :0;/* remove outer padding, if any */ text-align:center;/* align the text horizontally with the center */ padding: 0;/* remove inner padding, if any */ ) /* end No. 1*/
In exactly the same way, it is possible to implement the image in the vertical center, but by adding one new property vertical-align: middle; .
Example. Demo #2
Example. Demo #2/* No.2 */ .talign2( border: 1px solid red; line-height:200px;/* block line height */ ) .talign2 div( text-align:center;/* align elements horizontally centered */ ) .talign2 img( vertical-align:middle;/* align the images vertically in the center */ border: 1px solid black; ) /* end №2*/
Alignment with position property
This method is widely used in many CSS tasks, including our task. But it should be noted that it is not completely perfect and has its side effects. This is because the element's percent centering will be centered on the top left edge of the inner block.
Therefore, you need to set a negative value for the margins. The size of the indentation on the top should correspond to half the height of the internal block, and the indentation on the left should correspond to half the width. Thus, we obtain the absolute center.
In this option, it is probably mandatory to know the exact height and width of the child element. Otherwise, incorrect centering may occur.
/* No.3 */ .talign3( border: 1px solid red; height:200px;/* block height */ position: relative; ) .talign3 div( position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -5% 0 0 -25%; border: 1px solid black;
Alignment with table property
Here we use an old technique, turning the elements into a table with cells. In this case, the table tags
