Css vertical alignment. Absolute positioning and stretching. Horizontal alignment

Every layout designer is constantly faced with the need to align content in a block: horizontally or vertically. There are some good articles on this subject, but they all offer many interesting, but few practical options, which is why you have to spend extra time to highlight the main thing. I decided to submit this information in the form that is convenient for me so as not to google it anymore.

Aligning blocks with known dimensions

Easiest with using CSS align blocks that have a known height (for vertical alignment) or width (for horizontal alignment).

Alignment with padding

Sometimes you can not center an element, but add borders to it with the " padding".

For example, you have a 200x200px picture and you want to center it in a 240x300 block. We can set the height and width of the outer box \u003d 200px, and add 20px at the top and bottom, and 50 on the left and right.

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

Aligning absolutely positioned boxes

If the block is set to " position: absolute", then it can be positioned relative to the closest parent with" position: relative ". To do this, all properties (" top","right","bottom","left") assign the same value to the indoor unit, as well as" margin: auto ".

* There is a nuance: The width (height) of the inner block + the value of left (right, bottom, top) should not exceed the size of the parent block. It is safer to set the left (right, bottom, top) properties to 0 (zero).

.example-wrapper2 (position: relative; height: 250px; background: url (space.jpg);) .cat-king (width: 200px; height: 200px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background: url (king.png);)

Horizontal alignment

Alignment with "text-align: center"

There is a special property for aligning text in a block " text-align". When the value is set" center"each line of text will be horizontally aligned. For multi-line text, this solution is used extremely rarely, more often this option can be found for aligning spans, links or pictures.

Once I had to come up with text to show how text alignment with CSS works, but nothing interesting came to my mind. At first I decided to copy a nursery rhyme somewhere, but I remembered that this might spoil the uniqueness of the article, and our dear readers will not be able to find it in Google. And then I decided to write this paragraph here - after all, the point is not with it, but the point is in alignment.

.example-text (text-align: center; padding: 10px; background: # FF90B8;)

It is worth noting that this property will work not only for text, but also for any inline elements ("display: inline").

But this text is aligned to the left, but it is in the block, which is aligned in the center relative to the wrapper.

.example-wrapper3 (text-align: center; background: # FF90B8;) .inline-text (display: inline-block; width: 40%; padding: 10px; text-align: left; background: # FFE Загрузка;)

Aligning blocks with margins

Block elements with known width are easily aligned horizontally by setting them to "margin-left: auto; margin-right: auto". The abbreviated notation is usually used: " margin: 0 auto"(any value can be used instead of zero). But this method will not work for vertical alignment.

.lama-wrapper (height: 200px; background: # F1BF88;) .lama1 (height: 200px; width: 200px; background: url (lama.jpg); margin: 0 auto;)

This is how it is worth aligning all blocks where possible (where fixed or absolute positioning is not required) - it is the most logical and adequate. Although this seems obvious, I sometimes saw frightening examples with negative margins, so I decided to clarify.

Vertical alignment

With vertical alignment, much more problems - apparently, this was not provided in CSS. There are several ways to achieve the desired result, but they are all not very pretty.

Aligning with the line-height property

In the case when there is only one line in the block, you can achieve its vertical alignment by applying the " line-height"and setting it to the desired height. For reliability, it is worth setting also" height ", the value of which will be equal to the value of" line-height ", because the latter is not supported in all browsers.

.example-wrapper4 (line-height: 100px; color: # DC09C0; background: # E5DAE1; height: 100px; text-align: center;)

It is also possible to achieve block alignment with multiple lines. To do this, you will have to use an additional wrapper block, and set the line height to it. The inner block can be multi-line, but "inline" is required. You need to apply "vertical-align: middle" to it.

.example-wrapper5 (line-height: 160px; height: 160px; font-size: 0; 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;)

The wrapper block must have "font-size: 0" set. If you don't set the font size to zero, the browser will add a few extra pixels from itself. You will also have to specify the font size and line height for the inner block, because these properties are inherited from the parent.

Vertical alignment in tables

Property " vertical-align"also affects table cells. With the value" middle "set, the content inside the cell is centered. Of course, table layout is considered archaic these days, but in exceptional cases you can simulate it by specifying" display: table-cell".

I usually use this option for vertical alignment. Below is an example of layout taken from a ready-made project. Of interest is the picture that is vertically centered in this way.

.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;)

It should be remembered that if an element has "float" other than "none", then it will in any case be block (display: block) - then you have to use an additional block-wrapper.

Aligning with an additional inline element

And for inline elements you can apply " vertical-align: middle". In this case, all elements with" display: inline"that are on the same line will align with the common center line.

You need to create an auxiliary block with a height equal to the height of the parent block, then the desired block will be centered. It is convenient to use the: before or: after pseudo-elements for this.

.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;)

Display: flex and align

If you don't care too much about the Explorer 8 users, or care so much that you're willing to insert some extra javascript for their sake, you can use "display: flex". Flex boxes do a great job of handling alignment issues, and just write "margin: auto" to center the content inside.

So far, this method has practically not come across to me, but there are no special restrictions for it.

.example-wrapper7 (display: flex; height: 300px; background: # AEB96A;) .example-wrapper7 img (margin: auto;)

Well, that's all I wanted to write about CSS alignment. Now centering content won't be a problem!

Often when typesetting, there is a need for vertical alignment of text in a block. If this needs to be done in a table cell, 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 markup with unnecessary tags? The answer is “you can”, but due to the poor support of CSS by the MSIE browser, the solution to the problem for it will differ from the solution for other common browsers.

Consider the following snippet as an example:

Some text

and try to vertically align the text to the center of the box and to the bottom of the box.

The solution of the problem

"Correct" browsers (including MSIE

Most modern browsers support CSS2.1, namely the table-cell value for the display property. This gives us the ability to make the block with the text appear as a table cell and, using this, align the text vertically:

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

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

Internet Explorer (up to 7th version inclusive)

To solve the problem of aligning text to the bottom edge of a block in MSIE, you can use absolute positioning (here we need an inline element nested 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 the "right" browsers.

Specify properties

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

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

To vertically align the text in the center of the block, the original fragment will still have to be complicated - we will introduce one more inline element:

Study Material:

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 way to vertically align in CSS (cssing.org.ua/2007/04/26/another-css-valign-method)

Centering elements vertically with CSS is a challenging task for developers. However, there are several methods for solving it, which are quite simple. This lesson presents 6 options for vertically centering content.

Let's start with general description tasks.

Vertical centering problem

Centering horizontally is very simple and easy. When the centered element is inline, use the parent-align property. When the element is block-based, we set its width and automatic installation left and right margins.

Most people, when using the text-align: property, refer to the vertical-align property to center vertically. Everything looks logical enough. If you've used tabular templates, you've probably used the valign attribute heavily, which reinforces the belief that vertical-align is the right way to go.

But the valign attribute only works on table cells. And the vertical-align property is very similar to it. It also affects table cells and some inline elements.

The value of the vertical-align property acts in relation to the parent inline element.

In a line of text, alignment is performed in relation to the line height.
Alignment is used in the table cell in relation to the value calculated by a special algorithm (usually the row height is obtained).

Unfortunately, the vertical-align property has no effect on block-level elements (like paragraphs inside a div element). This situation may lead to the idea that there is no solution to the problem of vertical alignment.

But there are other methods for centering block elements, the choice of which depends on what is centered in relation to the outer container.

Line-height method

This method works when you want to vertically center one line of text. All you have to do is set the line height to be larger than the font size.

By default, the free space will be distributed evenly at the top and bottom of the text. And the line will be centered vertically. Often, the line height is made equal to the element height.

HTML:

Desired text

CSS:

#child (line-height: 200px;)

This method works in all browsers, although it can only be used for one line. The value 200 px in the example is chosen arbitrarily. Any value larger than the font size of the text can be used.

Centering an image using line-height

What if the content is a picture? Will the above method work? The answer lies in one more line of CSS.

HTML:

CSS:

#parent (line-height: 200px;) #parent img (vertical-align: middle;)

The line-height property value must be greater than the image height.

CSS tables method

It was mentioned above that the vertical-align property applies to table cells where it works great. We can render our element as a table cell and use the vertical-align property for it to vertically center the content.

Note: A CSS table is not the same as an HTML table.

HTML:

Content

CSS:

#parent (display: table;) #child (display: table-cell; vertical-align: middle;)

We set the tabular output for the parent div, and the nested div is output as a table cell. Now you can use the vertical-align property on the inner container. Everything in it will be centered vertically.

Unlike the above method, in this case the content can be dynamic, as the div element will resize to fit its content.

The disadvantage of this method is that it does not work in older versions of IE. We have to use the display: inline-block property for the nested container.

Absolute positioning and negative margins

This method also works in all browsers. But it requires that the centered element be given a height.

The example code does the same horizontal and vertical centering:

HTML:

Content

CSS:

#parent (position: relative;) #child (position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%;)

First, we set the type of positioning of the elements. Then, for the nested div, set the top and left properties to 50%, which is the center of the parent. But the top-left corner of the nested element is centered. Therefore, you need to raise it up (half the height) and move it to the left (half the width), and then the center will coincide with the center of the parent element. So knowing the height of the element is necessary in this case. Then we set the element to negative top and left margins equal to half the height and width, respectively.

This method does not work in all browsers.

Absolute positioning and stretching

The example code does centering vertically and horizontally.

HTML:

Content

CSS:

#parent (position: relative;) #child (position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto;)

The idea behind this method is to stretch the nested element to all 4 borders of the parent element by setting the top, bottom, right, and left properties to 0.

Setting it to auto-form margins on all sides will set equal values \u200b\u200bon all 4 sides and place our nested div in the center of the parent element.

Unfortunately, this method doesn't work in IE7 and below.

Equal top and bottom margins

This method explicitly sets equal margins above and below the parent element.

HTML:

Content

CSS:

#parent (padding: 5% 0;) #child (padding: 10% 0;)

The example CSS code sets the top and bottom margins for both elements. For a nested element, setting the padding will serve for vertical centering. And the padding of the parent element will center the nested element in it.

For dynamic change element sizes used relative units measurements. And for absolute units of measurement, you have to do calculations.

For example, if the parent element is 400px high and the nested element is 100px, then 150px top and bottom margins are required.

150 + 150 + 100 = 400

Using% allows the calculations to be left to the browser.

This method works everywhere. Back side is the need for calculations.

Note: This method works by setting the outer padding of an element. You can also use margins inside the element. The decision to use margins or padding should be made depending on the specifics of the project.

Floating div

This method uses an empty div element that floats and helps control the position of our nested element in the document. Note that the floating div is positioned before our nested element in the HTML code.

HTML:

Content

CSS:

#parent (height: 250px;) #floater (float: left; height: 50%; width: 100%; margin-bottom: -50px;) #child (clear: both; height: 100px;)

We offset the empty div to the left or right and set its height to 50% of the parent element. This way it will fill the top half of the parent.

Since this div is floating, it is removed from the normal flow of the document, and we need to cancel the text wrapping for the nested element. The example uses clear: both, but it is sufficient to use the same direction as the offset of the floating empty div.

The top border of the nested div is directly below the bottom border of the empty div. We need to move the nested element up by half the height of the floating empty element. To solve the problem, use a negative value for the margin-bottom property for a floating empty div element.

This method also works in all browsers. However, using it requires an extra empty div element and knowledge of the height of the nested element.

Conclusion

All methods described are easy to use. The difficulty is that none of them are suitable for all cases. You need to analyze the project and choose the one that best suits the requirements.

Anyone involved in layout will sooner or later face the need to align elements vertically ... and they know what difficulties can arise when aligning an element in the center. CSS has a `vertical-align` property with multiple values, which, logically, should do vertical alignment. In practice, however, it does not work at all as expected.

There are several techniques for solving 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, to the inner block.

Html

CSS

Outer (width: 200px; height: 200px; text-align: center; vertical-align: middle; background-color: #ffc;)

The main disadvantage this decision, from the point of view of semantics - the use of the table not for its intended purpose. The second drawback is that creating the table requires adding one more element around the outer block.

The first minus can be partially non-violent by replacing the table tags with div and setting the table display mode in CSS.

Html

CSS

Outer-wrapper (display: table;) .outer (display: table-cell;)

2. Alignment with indents

Assuming we know the heights of the inner and outer boxes, the alignment can be set using the vertical padding of the inner box 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 obligatory knowledge of the height of both blocks.

3. Alignment with line-height

If the inner block takes up 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 go to the second line, it is advisable to also add the rules white-space: nowrap and overflow: hidden.

CSS

Outer (height: 200px; line-height: 200px;) .inner (white-space: nowrap; overflow: hidden;)

This method can also be used to align multi-line text. To do this, the inner block needs to override the line-height value and 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 "stretch"

This method can be used when the height of the indoor unit is known to us, but the outside is not.

To apply this method, we need:

Set the outer block to relative positioning position: relative, and to the inner one - absolute position: absolute;
Add several 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 indoor 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

Similarly to the previous one, this method is applied when the height of the outer block is unknown, but the height of the inner one is known.

You need to set the outer block relative positioning, and the inner one - absolute. 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;)

Minus this method - the height of the indoor unit must be known.

6. Alignment with transform

The method can be applied 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 pseudo-element

This is the most universal way, which 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 set it to vertical alignment. Thus, the height of the added block will be equal to the height of the outer block. The indoor unit will be vertically aligned with the added, and therefore the outdoor unit.

In order not to break the semantics, it is advisable to add the 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 is impossible to accept with the absolute positioning of the indoor unit.

8. Align with Flexbox

The most modern way of vertical alignment is using Flexible Box Layout (or abbreviated Flexbox). It allows you to flexibly control the positioning of elements on the page, placing them almost anywhere. Center alignment for Flexbox is a very simple task.

In CSS, some seemingly simple things are not easy to accomplish. One of these things is alignment, i.e. when one element needs to be positioned in a certain way relative to another.

This article presents some ready-made solutions that will help simplify the work of centering elements horizontally and / or vertically.

Note: under each solution, there is a list of browsers with the versions in which the specified CSS code works.

CSS - Center Align a Block

1. Align one block to the center of another. In this case, the first and second blocks have dynamic dimensions.

...

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. Align one block to the center of another. In this case, the second block has fixed dimensions.

Parent (position: relative;) .child (position: absolute; left: 50%; top: 50%; / * 2 blocks width and height * / width: 500px; height: 250px; / * Values \u200b\u200bare determined based on its size * / / * margin-left \u003d - width / 2 * / margin-left: -250px; / * margin-top \u003d - height / 2 * / margin-top: -125px;)