Align text vertically and center CSS. Vertical alignment of elements using CSS

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? The answer is “you can,” but due to poor CSS support in the 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

Most 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)

In CSS, some seemingly simple things are not so easy to do. 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: Below each solution is a list of browsers indicating the versions in which the specified CSS code works.

CSS - Center Align Block

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

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. Aligning 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%; /* width and height of 2 blocks */ width: 500px; height: 250px; /* Values ​​are determined depending on its size */ /* margin-left = - width / 2 */ margin-left: -250px; /* margin-top = - height / 2 */ margin-top: -125px; )

Browsers that support this solution:

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

3. Aligning one block to the center of another. In this case, the second block has dimensions specified in percentages.

Parent ( position: relative; ) .child ( position: absolute; /* width and height of 2 blocks in % */ height: 50%; width: 50%; /* Values ​​are determined depending on its size in % */ left: 25%; /* (100% - width) / 2 */ top: 25%; /* (100% - height) / 2 */ )

Browsers that support this solution:

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

CSS - Horizontal Alignment

1. Aligning one block element (display: block) relative to another (in which it is located) horizontally:

Block ( margin-left: auto; margin-right: auto; )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Aligning a line (display: inline) or line-block (display: inline-block) element horizontally:

Parent ( text-align: center; ) .child ( display: inline-block; )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Vertical Alignment

1. Center one element (display: inline, display: inline-block) relative to the other (in which it is located) in the center. The parent block in this example has a fixed height, which is set using the CSS line-height property.

Parent ( line-height: 500px; ) .child ( display: inline-block; vertical-align: middle; )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Centering one block relative to another vertically by representing the parent as a table, and the child as a cell of this table.

Parent ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Browsers that support this solution:

• Chrome 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

If you know any other interesting tricks or useful ready-made alignment solutions, then share them in the comments.

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

Aligning blocks with known sizes

The easiest way to use CSS is to align blocks that have a known height (for vertical alignment) or width (for horizontal alignment).

Alignment using padding

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

For example, there is a picture of 200 by 200 pixels, and you need to center it in a block of 240 by 300. We can set the height and width of the outer block = 200px, and add 20 pixels at the top and bottom, and 50 at the left and right.

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

Aligning Absolutely Positioned Blocks

If the block is set to " position: absolute", then it can be positioned relative to its closest parent with "position: relative". This requires all properties (" top","right","bottom","left") of the inner block to assign the same value, 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 dimensions of the parent block. It is safer to assign 0 (zero) to the left (right, bottom, top) properties.

.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 using "text-align: center"

To align text in a block there is a special property " text-align". When set to " center"Each line of text will be aligned horizontally. For multi-line text, this solution is used extremely rarely; more often this option can be found for aligning spans, links or images.

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

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

It's 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 a block that is centered relative to the wrapper.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; )

Aligning blocks using margin

Block elements with a known width can easily be aligned horizontally by setting them to "margin-left: auto; margin-right: auto". Usually the abbreviation is used: " margin: 0 auto" (any value can be used instead of zero). But this method is not suitable for vertical alignment.

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

This is how you should align all blocks, where possible (where fixed or absolute positioning is not required) - it is the most logical and adequate. Although this seems obvious, I have sometimes seen scary examples with negative indents, so I decided to clarify.

Vertical alignment

Vertical alignment is much more problematic - apparently, this was not provided for in the CSS. There are several ways to achieve the desired result, but all of them are not very beautiful.

Alignment with line-height property

In the case when there is only one line in a block, you can achieve its vertical alignment by using 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 several lines. To do this, you will have to use an additional wrapper block and set the line height to it. An internal block can be multi-line, but must be "inline". 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. 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 set to "middle", the content inside the cell is aligned to the center. Of course, table layout is considered archaic nowadays, 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 completed project. It is the picture that is centered vertically in this way that is of interest.

.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 a “float” set other than “none”, then it will in any case be block (display: block) - then you will have to use an additional block wrapper.

Alignment with an additional inline element

And for inline elements you can use " vertical-align: middle". Moreover, all elements with " display: inline" that are on the same line will align with a 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. To do this, it is convenient to use the pseudo-elements:before or:after.

.example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; width : 200px ; height : 200px ; ) .riki ( display : inline-block ; height : 100% ; vertical-align : middle ; )

Display: flex and alignment

If you don't care much about Explorer 8 users, or care so much that you're willing to insert a piece of extra javascript for them, then you can use "display: flex". Flex boxes are great at dealing with alignment issues, and just write "margin: auto" to center the content inside.

So far, I have practically never encountered this method, 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 will not be a problem!

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 block will be aligned vertically with respect to the added one, and therefore the external block.

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.

Centering elements vertically using CSS is a task that presents some difficulty 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 a general description of the problem.

Vertical Centering Problem

Horizontal centering is very simple and easy. When the centered element is inline, we use the alignment property relative to the parent element. When the element is block-level, we set its width and automatic setting of left and right margins.

Most people, when using the text-align: property, refer to the vertical-align property for vertical centering. Everything looks quite logical. If you've used table templates, you've probably made extensive use of the valign attribute, which reinforces the belief that vertical-align is the right way to solve the problem.

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 is relative to the parent inline element.

• In a line of text, alignment is relative to the line height.
• The table cell uses alignment relative to a value calculated by a special algorithm (usually the row height).

But unfortunately, the vertical-align property does not work on block-level elements (for example, paragraphs inside a div element). This situation may lead one to think 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 being centered in relation to the outer container.

Line-height method

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

By default, the white 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:

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 was chosen arbitrarily. You can use any value larger than the text font size.

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 code.

HTML:

CSS:

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

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

CSS Table Method

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

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

HTML:

CSS:

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

We set the table output to the parent div element and output the nested div element as a table cell. You can now 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 change size according to its content.

The disadvantage of this method is that it does not work in older versions of IE. You 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 element being centered be given a height.

The example code performs horizontal and vertical centering at the same time:

HTML:

CSS:

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

First, we set the element positioning type. Next, we set the nested div element's top and left properties to 50%, which corresponds to the center of the parent element. But the center is the top left corner of the nested element. Therefore, you need to lift 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 in this case is necessary. Then we set the element with 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 performs vertical and horizontal centering.

HTML:

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 the margins to auto-generate on all sides will set equal values ​​on all 4 sides and center our nested div element on its parent element.

Unfortunately, this method does not work in IE7 and below.

Equal spaces above and below

In this method, equal padding is explicitly set above and below the parent element.

HTML:

CSS:

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

The example CSS code sets top and bottom padding for both elements. For a nested element, setting the padding will serve to vertically center it. And the parent element's padding will center the nested element within it.

Relative units of measurement are used to dynamically resize elements. And for absolute units of measurement you will have to do calculations.

For example, if the parent element has a height of 400px and the nested element is 100px, then 150px of padding is needed at the top and bottom.

150 + 150 + 100 = 400

Using % allows you to leave the calculations to the browser.

This method works everywhere. The downside is the need for calculations.

Note: This method works by setting the outer padding of an element. You can also use margins within an element. The decision to use margins or padding must 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 placed before our nested element in the HTML code.

HTML:

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 its parent element. This way it will fill the top half of the parent element.

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

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

This method also works in all browsers. However, using it requires an additional 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.