I think many of you who have had to deal with layout have encountered the need to align elements vertically and know the difficulties that arise when aligning an element to the center.
Yes, there is a special multi-value vertical-align property in CSS for vertical alignment. However, in practice it doesn't work at all as expected. Let's try to figure this out.
Let's compare the following approaches. Align using:
- tables,
- indentation,
- line-height
- stretching,
- negative margin,
- transform
- pseudo element
- flexbox.
There are two div element, with one of them nested within the other. Let's give them the corresponding classes - outer and inner.
The challenge is to align the inner element with the center of the outer element.
First, let's consider the case when the dimensions of the external and internal blocks known. Let's add the rule display: inline-block to the inner element, and text-align: center and vertical-align: middle to the outer element.
Remember that alignment only applies to elements that have an inline or inline-block display mode.
Let's set the sizes of the blocks, as well as background colors so that we can see their borders.
Outer ( width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc; )
After applying the styles we will see that indoor unit aligned horizontally, but not vertically:
http://jsfiddle.net/c1bgfffq/
Why did it happen? The thing is that the vertical-align property affects the alignment the element itself, not its contents(except when it is applied to table cells). Therefore, the application of this property to external element didn't give anything. Moreover, applying this property to an inner element will also do nothing, since inline-blocks are aligned vertically relative to adjacent blocks, and in our case we have one inline block.
There are several techniques to solve this problem. Below we will take a closer look at each of them.
Alignment using a table
The first solution that comes to mind is to replace the outer block with a table of one cell. In this case, the alignment will be applied to the contents of the cell, that is, to the inner block.
http://jsfiddle.net/c1bgfffq/1/
The obvious disadvantage of this solution is that, from a semantic point of view, it is incorrect to use tables for alignment. The second disadvantage is that creating a table requires adding another element around the outer block.
The first minus can be partially removed by replacing the table and td tags with div and setting the table display mode in CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
However, the outer block will still remain a table with all the ensuing consequences.
Alignment using indents
If the heights of the inner and outer blocks are known, then the alignment can be set using the vertical indents of the inner block using the formula: (H outer – H inner) / 2.Outer ( height: 200px; ) .inner ( height: 100px; margin: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
The disadvantage of the solution is that it is applicable only in a limited number of cases when the heights of both blocks are known.
Alignment using line-height
If you know that the inner block should occupy 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 recommended to also add the white-space: nowrap and overflow: hidden rules.Outer ( height: 200px; line-height: 200px; ) .inner ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/
This technique can also be used to align multiline text if you redefine the line-height value for the inner block, and also add the display: inline-block and vertical-align: middle rules.
Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/
Minus this method is that the height of the external block must be known.
Alignment using "stretch"
This method can be used when the height of the external block is unknown, but the height of the internal block is known.To do this you need:
- set relative positioning to the external block, and absolute positioning to the internal block;
- add the rules top: 0 and bottom: 0 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 inner block to auto.
http://jsfiddle.net/c1bgfffq/4/
The idea behind this technique is that setting a height for a stretched and absolutely positioned block causes the browser to calculate the vertical padding in an equal ratio if it is set to auto .
Alignment with negative margin-top
This method has become widely known and is used very often. Like the previous one, it is used when the height of the outer block is unknown, but the height of the inner one is known.You need to set the external block to relative positioning, and the internal block to absolute positioning. Then you need to 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.
Outer ( position: relative; ) .inner ( height: 100px; position: absolute; top: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/
The disadvantage of this method is that the height of the indoor unit must be known.
Alignment with transform
This method is similar to the previous one, but it can be used when the height of the indoor unit is unknown. In this case, instead of setting a negative pixel padding, you can use the transform property and move the inner block up using the translateY function and a value of -50% .Outer ( position: relative; ) .inner ( position: absolute; top: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Why was it impossible to set the value as a percentage in the previous method? Since percentage margin values are calculated relative to the parent element, a value of 50% would be half the height of the outer box, and we would need to raise the inner box to half its own height. The transform property is perfect for this.
The disadvantage of this method is that it cannot be used if the indoor unit has absolute positioning.
Alignment with Flexbox
Most modern way vertical alignment is to use Flexible Box Layout (popularly known as Flexbox). This module 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.The outer block needs to be set to display: flex and the inner block to margin: auto . And it's all! Beautiful, is not it?
Outer ( display: flex; width: 200px; height: 200px; ) .inner ( width: 100px; margin: auto; )
http://jsfiddle.net/c1bgfffq/14/
The disadvantage of this method is that Flexbox is supported only by modern browsers.
Which method should I choose?
You need to start from the problem statement:- To vertically align text, it is better to use vertical indents or the line-height property.
- For absolutely positioned elements with a known height (for example, icons), the method with a negative margin-top property is ideal.
- For more complex cases When the height of the block is unknown, you need to use a pseudo element or the transform property.
- Well, if you are so lucky that you do not need to support older versions of the IE browser, then, of course, it is better to use Flexbox.
I think many of you who have had to deal with layout have encountered the need to align elements vertically and know the difficulties that arise when aligning an element to the center.
Yes, there is a special multi-value vertical-align property in CSS for vertical alignment. However, in practice it doesn't work at all as expected. Let's try to figure this out.
Let's compare the following approaches. Align using:
- tables,
- indentation,
- line-height
- stretching,
- negative margin,
- transform
- pseudo element
- flexbox.
There are two div elements, with one of them nested within the other. Let's give them the corresponding classes - outer and inner.
The challenge is to align the inner element with the center of the outer element.
First, let's consider the case when the dimensions of the external and internal blocks known. Let's add the rule display: inline-block to the inner element, and text-align: center and vertical-align: middle to the outer element.
Remember that alignment only applies to elements that have an inline or inline-block display mode.
Let's set the sizes of the blocks, as well as background colors so that we can see their borders.
Outer ( width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc; )
After applying the styles, we will see that the inner block is aligned horizontally, but not vertically:
http://jsfiddle.net/c1bgfffq/
Why did it happen? The thing is that the vertical-align property affects the alignment the element itself, not its contents(except when it is applied to table cells). Therefore, applying this property to the outer element did not produce anything. Moreover, applying this property to an inner element will also do nothing, since inline-blocks are aligned vertically relative to adjacent blocks, and in our case we have one inline block.
There are several techniques to solve this problem. Below we will take a closer look at each of them.
Alignment using a table
The first solution that comes to mind is to replace the outer block with a table of one cell. In this case, the alignment will be applied to the contents of the cell, that is, to the inner block.
http://jsfiddle.net/c1bgfffq/1/
The obvious disadvantage of this solution is that, from a semantic point of view, it is incorrect to use tables for alignment. The second disadvantage is that creating a table requires adding another element around the outer block.
The first minus can be partially removed by replacing the table and td tags with div and setting the table display mode in CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
However, the outer block will still remain a table with all the ensuing consequences.
Alignment using indents
If the heights of the inner and outer blocks are known, then the alignment can be set using the vertical indents of the inner block using the formula: (H outer – H inner) / 2.Outer ( height: 200px; ) .inner ( height: 100px; margin: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
The disadvantage of the solution is that it is applicable only in a limited number of cases when the heights of both blocks are known.
Alignment using line-height
If you know that the inner block should occupy 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 recommended to also add the white-space: nowrap and overflow: hidden rules.Outer ( height: 200px; line-height: 200px; ) .inner ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/
This technique can also be used to align multiline text if you redefine the line-height value for the inner block, and also add the display: inline-block and vertical-align: middle rules.
Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/
The disadvantage of this method is that the height of the external block must be known.
Alignment using "stretch"
This method can be used when the height of the external block is unknown, but the height of the internal block is known.To do this you need:
- set relative positioning to the external block, and absolute positioning to the internal block;
- add the rules top: 0 and bottom: 0 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 inner block to auto.
http://jsfiddle.net/c1bgfffq/4/
The idea behind this technique is that setting a height for a stretched and absolutely positioned block causes the browser to calculate the vertical padding in an equal ratio if it is set to auto .
Alignment with negative margin-top
This method has become widely known and is used very often. Like the previous one, it is used when the height of the outer block is unknown, but the height of the inner one is known.You need to set the external block to relative positioning, and the internal block to absolute positioning. Then you need to 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.
Outer ( position: relative; ) .inner ( height: 100px; position: absolute; top: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/
The disadvantage of this method is that the height of the indoor unit must be known.
Alignment with transform
This method is similar to the previous one, but it can be used when the height of the indoor unit is unknown. In this case, instead of setting a negative pixel padding, you can use the transform property and move the inner block up using the translateY function and a value of -50% .Outer ( position: relative; ) .inner ( position: absolute; top: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Why was it impossible to set the value as a percentage in the previous method? Since percentage margin values are calculated relative to the parent element, a value of 50% would be half the height of the outer box, and we would need to raise the inner box to half its own height. The transform property is perfect for this.
The disadvantage of this method is that it cannot be used if the indoor unit has absolute positioning.
Alignment with Flexbox
The most modern way of vertical alignment is to use Flexible Box Layout (popularly known as Flexbox). This module 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.The outer block needs to be set to display: flex and the inner block to margin: auto . And it's all! Beautiful, is not it?
Outer ( display: flex; width: 200px; height: 200px; ) .inner ( width: 100px; margin: auto; )
http://jsfiddle.net/c1bgfffq/14/
The disadvantage of this method is that Flexbox is supported only by modern browsers.
Which method should I choose?
You need to start from the problem statement:- To vertically align text, it is better to use vertical indents or the line-height property.
- For absolutely positioned elements with a known height (for example, icons), the method with a negative margin-top property is ideal.
- For more complex cases, when the height of the block is unknown, you need to use a pseudo element or the transform property.
- Well, if you are so lucky that you do not need to support older versions of the IE browser, then, of course, it is better to use Flexbox.
Tags: Add tags
Aligning elements horizontally and vertically can be done different ways. The choice of method depends on the type of element (block or inline), the type of its positioning, size, etc.
1. Horizontal alignment to the center of the block/page
1.1. If the block width is specified:
div ( width: 300px; margin: 0 auto; /*center the element horizontally within the parent block*/ )If you want to align an inline element this way, it needs to be set to display: block;
1.2. If a block is nested within another block and its width is not specified/specified:
1.3. If the block has a width and needs to be centered on its parent block:
1.4. If the blocks don't have a width specified, you can center them using a parent wrapper block:
2. Vertical alignment
2.1. If the text occupies one line, for example, for buttons and menu items:
.button ( height: 50px; line-height: 50px; )2.2. To vertically align a block within a parent block:
2.3. Vertical alignment by table type:
2.4. If a block has a given width and height and needs to be centered on its parent block:
2.5. Absolute positioning at the center of the page/block using CSS3 transformation:
if dimensions are specified for the element
div ( width: 300px; /*set the width of the block*/ height:100px; /*set the height of the block*/ transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50% ; )
if the element has no dimensions and is not empty
Some text here
There are several fundamentally different ways to center an object vertically using CSS, but choosing the right one can be tricky. We will look at some of them, and also make a small website using the knowledge gained.
Vertical center alignment is not easy to achieve using CSS. There are many ways and not all work in all browsers. Let's look at 5 various methods, as well as the pros and cons of each of them. Example.
1st method
This method assumes that we set some element
pros
- Content can change height dynamically (height is not defined in CSS).
- Content is not cut off if there is not enough space for it.
Minuses
- Doesn't work in IE 7 or less
- Lots of nested tags
2nd method
This method uses absolute positioning of the div, with top set to 50% and margin-top minus half the content height. This implies that the object must have a fixed height, which is defined in the CSS styles.
Since the height is fixed, you can set overflow:auto; for a div containing content, thus, if the content does not fit, scroll bars will appear.
pros
- Works in all browsers.
- There is no unnecessary nesting.
Minuses
- When there is not enough space, the content disappears (for example, the div is inside the body and the user has made the windows smaller, in which case the scrollbars will not appear.
3rd method
In this method, we will wrap the content div with another div. Let's set its height to 50% (height: 50%;), and the bottom margin to half the height (margin-bottom:-contentheight;). The content will clear float and be centered.
pros
- Works in all browsers.
- When there is not enough space (for example, when the window is reduced), the content is not cropped, scrollbars will appear.
Minuses
- I can only think of one thing: that an extra empty element is being used.
4th method.
This method uses the position:absolute; property. for a div with fixed dimensions (width and height). Then we set its coordinates top:0; bottom:0; , but since it has a fixed height, it cannot stretch and is aligned to the center. This is very similar to the well-known method of horizontally centering a fixed-width block element (margin: 0 auto;).
pros
- Very simple.
Minuses
- Doesn't work in Internet Explorer
- Content will be cut off without scroll bars if there is not enough space in the container.
5th method
Using this method, you can center align one line of text. We simply set the text height (line-height) equal to the element height (height). After this, the line will be displayed in the center.
pros
- Works in all browsers.
- Doesn't cut off text if it doesn't fit.
Minuses
- Works only with text (does not work with block elements).
- If there is more than one line of text, it looks very bad.
This method is very useful for small elements, such as centering text in a button or text field.
Now you know how to achieve vertical center alignment, let's make a simple website that will end up looking like this:
Step 1
It's always good to start with semantic markup. Our page will be structured as follows:
- #floater (to center content)
- #centred (central element)
- #side
- #logo
- #nav (list
- #content
- #bottom (for copyrights and all that)
Let's write the following html markup:
A Centered Company A CompanyPage Title
Holistically re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. Energistically simplify impactful niche markets via enabled imperatives. Holistically predominate premium innovation after compelling scenarios. Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. Distinctively syndicate standards compliant schemas before robust vortals. Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.
Heading 2
Efficiently embrace customized web-readiness rather than customer directed processes. Assertively grow cross-platform imperatives vis-a-vis proactive technologies. Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces. Conveniently streamline competitive strategic theme areas with focused e-markets. Phosfluorescently syndicate world-class communities vis-a-vis value-added markets. Appropriately reinvent holistic services before robust e-services.
Copyright notice goes here
Step 2
Now we will write the simplest CSS to place elements on the page. You should save this code in a style.css file. It is to this that the link is written in the html file.
Html, body ( margin: 0; padding: 0; height: 100%; ) body ( background: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serifs; ) #floater ( position: relative; float: left; height: 50%; margin-bottom: -200px; width: 1px; ) #centered ( position: relative; clear: left; height: 400px; width: 80%; max -width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; ) #bottom ( position: absolute; bottom: 0; right: 0; ) #nav ( position: absolute; left: 0; top: 0; bottom: 0; right: 70%; padding: 20px; margin: 10px; ) #content ( position: absolute; left: 30%; right: 0; top: 0; bottom: 0; overflow: auto; height: 340px; padding: 20px; margin: 10px; )
Before making our content center aligned, we need to set the height of the body and html to 100%. Since the height is calculated without internal and external padding (padding and margin), we set them (padding) to 0 so that there are no scrollbars.
The bottom margin for a "floater" element is equal to minus half the content height (400px), namely -200px ;
Your page should now look something like this:
#centered element width 80%. This makes our site narrower on small screens and wider on larger ones. most sites look indecent on the new wide monitors in the top left corner. The min-width and max-width properties also limit our page so that it doesn't look too wide or too narrow. Internet Explorer does not support these properties. You need to set it to a fixed width.
Since the #centered element has position:relative set, we can use absolute positioning of the elements within it. Then set overflow:auto; for the #content element so that scrollbars appear if the content does not fit.
Step 3
The last thing we'll do is add some styling to make the page look a little more attractive. Let's start with the menu.
#nav ul ( list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: none; color: #000; border-bottom: 1px solid #bbb; text-align: right; ) #nav li a::after ( content: """; color: #aaa; font-weight: bold; display: inline; float: right; margin: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( background: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )
The first thing we did to make the menu look better was to remove the bullets by setting the list-style:none attribute, and also set the padding and padding, since they vary greatly by default in different browsers.
Notice that we then specified that the links should be rendered as block elements. Now, when displayed, they are stretched across the entire width of the element in which they are located.
Another interesting thing we used for the menu is the pseudo-classes:before and:after. They allow you to add something before and after an element. This is a good way to add icons or symbols, such as an arrow at the end of each link. This trick does not work in Internet Explorer 7 and below.
Step 4
And last but not least, we will add some screws to our design for even more beauty.
#centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( font-family: Helvetica, Arial, sans- serif; font-weight: normal; color: #666; ) h1 ( color: #f93; border-bottom: 1px solid #ddd; letter-spacing: -0.05em; font-weight: bold; margin-top: 0; padding-top: 0; ) #bottom ( padding: 10px; font-size: 0.7em; color: #f03; ) #logo ( font-size: 2em; text-align: center; color: #999; ) #logo strong ( font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) a ( color: #f03; )
In these styles we set rounded corners for the #centered element. In CSS3, this will be done by the border-radius property. This is not yet implemented in some browsers, other than using the -moz and -webkit prefixes for Mozilla Firefox and Safari/Webkit.
Compatibility
As you probably already guessed, the main source of compatibility problems is Internet Explorer:
- The #floater element must have a width set
- IE 6 has extra padding around menus
Vlad Merzhevich
Due to the fact that the contents of table cells can be simultaneously aligned horizontally and vertically, the possibilities for controlling the position of elements relative to each other are expanded. Tables allow you to set the alignment of images, text, form fields, and other elements relative to each other and the web page as a whole. In general, alignment is mainly necessary to establish visual communication between different elements, as well as their groupings.
Vertical centering
One way to show the visitor the focus and name of the site is to use a splash page. This is the first page on which, as a rule, there is a flash splash screen or a picture expressing main idea site. The image is also a link to other sections of the site. You need to place this image in the center of the browser window, regardless of the monitor resolution. For this purpose, you can use a table with a width and height of 100% (example 1).
Example 1: Centering the drawing
Alignment 
IN in this example horizontal alignment is set using the align="center" tag parameter
, and the contents of the cell may not be centered vertically, since this is the default position. To set the table height to 100%, you need to remove, the code ceases to be valid.
Using the width and height to cover the entire available area of the web page ensures that the content of the table will be aligned exactly in the center of the browser window, regardless of its size.
Horizontal alignment
By combining the align (horizontal alignment) and valign (vertical alignment) attributes of the tag
, it is permissible to set several types of positions of elements relative to each other. In Fig. Figure 1 shows ways to align elements horizontally. Let's look at some examples of text alignment according to the figure below.
Top Alignment
To specify the top alignment of cell contents, for a tag
you need to set the valign attribute with the value top (example 2). Example 2: Using valign
Alignment Column 1 Column 2 In this example, cell characteristics are controlled using tag parameters
, but it’s also more convenient to change through styles. In particular, the alignment in cells is specified by the vertical-align and text-align properties (example 3). Example 3: Applying styles for alignment
Alignment Column 1 Column 2 To shorten the code, this example uses grouping of selectors because the vertical-align and padding properties are applied to two cells at the same time.
Bottom alignment is done in the same way, but instead of the top value, bottom is used.
Center alignment
By default, cell contents are aligned to the center of their vertical line, so if the columns have different heights, you need to set the alignment to the top edge. Sometimes you still need to leave the original alignment method, for example, when placing formulas, as shown in Fig. 2.
In this case, the formula is located strictly in the center of the browser window, and its number is located on the right edge. To arrange the elements in this way, you will need a table with three cells. The outer cells should have the same dimensions, in the middle cell the alignment is centered, and in the right cell - along the right edge (example 4). This number of cells is required to ensure that the formula is positioned in the center.
Example 4: Formula Alignment
Alignment 
(18.6) In this example, the first cell of the table is left empty; it serves only to create an indent, which, by the way, can also be set using styles.
Aligning Form Elements
Using tables, it is convenient to determine the position of form fields, especially when they are interspersed with text. One of the design options for the form, which is intended for entering a comment, is shown in Fig. 3.
To ensure that the text next to the form fields is right-aligned and the form elements themselves are left-aligned, you will need a table with an invisible border and two columns. The left column will contain the text itself, and the right column will contain text fields (example 5).
Example 5: Aligning Form Fields
Alignment In this example, for those cells where right alignment is required, the align="right" attribute is added. To ensure that the Comment label is positioned at the top of multiline text, the corresponding cell is set to top-aligned using the valign attribute.
- #side