Alignment in css block. Alignment using transform. What is DIV

Very often the task is to align a block in the center of the page / screen, and even so that without a Java script, without a task rigid sizes or negative indents, so that scrollbars also work for the parent if the block exceeds its size. There are quite a lot of monotonous examples on the Internet on how to align a block to the center of the screen. As a rule, most of them are based on the same principles.

Below are the main ways to solve the problem, their pros and cons. To understand the essence of the examples, I recommend reducing the height/width of the Result window in the examples at the links provided.

Option 1: Negative indentation.

Positioning block using the top and left attributes by 50%, and knowing the height and width of the block in advance, set a negative margin, which is equal to half the size block. A huge minus this option is that you need to count negative padding. Also block does not behave quite correctly when surrounded by scrollbars - it is simply cut off because it has negative margins.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 50%; left : 50%; margin: -125px 0 0 -125px; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; ) )

Option 2. Automatic indentation.

Less common, but similar to the first. For block set the width and height, position with attributes top right bottom left to 0, and set margin auto. The advantage of this option is working scrollbars parent, if the latter has 100% width and height. The disadvantage of this method is the rigid setting of dimensions.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; )

Option 3. Table.

Let's ask parent table styles, cell parent Set the text alignment to center. A block set the model line block. The disadvantages we get are non-working scrollbars, and in general, the aesthetics of the “emulation” of the table are not.

Parent ( width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; > .inner ( display: table-cell; text-align: center; vertical-align: middle; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

To add a scroll to this example, you will have to add one more element to the design.
Example: jsfiddle.net/serdidg/fk5nqh52/3.

Option 4. Pseudo-element.

This option is free of all the problems listed in previous methods, and also solves the initially set tasks. The point is that parent set styles pseudo element before, namely 100% height, center alignment and inline block model. It’s the same with block a line block model is placed, centered. To block didn't "fall" under pseudo element, when the dimensions of the first one are greater than parent, indicate parent white-space: nowrap and font-size: 0, after which block cancel these styles with the following - white-space: normal. IN in this example font-size: 0 is needed to remove the resulting space between parent And block due to code formatting. The space can be removed in other ways, but it is considered best to simply avoid it.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before ( height: 100%; display: inline-block; vertical-align: middle; content: ""; ; img (display: block; border: none; ) )

Or, if you need the parent to take up only the height and width of the window, and not the entire page:

Parent ( position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before ( height: 100%; display: inline-block; vertical-align: middle; content: ""; ( display: block; border: none; ) )

Option 5. Flexbox.

One of the simplest and most elegant ways is to use flexbox. It does not require unnecessary body movements, quite clearly describes the essence of what is happening, and is highly flexible. The only thing worth remembering when choosing this method- support for IE from version 10 inclusive. caniuse.com/#feat=flexbox

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block ( background: #60a839; img ( display: block; border: none; ) )

Option 6. Transform.

Suitable if we are limited by the structure, and there is no way to manipulate the parent element, but the block needs to be aligned somehow. will come to the rescue css function translate() . At value 50% absolute positioning will position the top left corner of the block exactly in the center, then a negative translate value will move the block relative to its own dimensions. Please note that they may float negative effects in the form of blurred edges or font style. Also, this method can lead to problems with calculating the position of the block using java-script. Sometimes, to compensate for the loss of 50% of the width due to the use css properties left can be helped by the rule specified for the block: margin-right: -50%; .

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; ) .block ( position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); img (display: block; ) )

Option 7. Button.

User option where block framed in a button tag. The button has the property of centering everything that is inside it, namely the elements of the inline and block-line (inline-block) model. In practice I do not recommend using it.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; ) .block ( display: inline-block; img (display: block;; border: none; ) )

Bonus

Using the idea of ​​the 4th option, you can set external margins for block, and the latter will be adequately displayed surrounded by scrollbars.
Example: jsfiddle.net/serdidg/nfqg9rza/2.

You can also align the image to the center, and if the image is larger parent, scale it to size parent.
Example: jsfiddle.net/serdidg/nfqg9rza/3.
Example with a large picture:

Centering elements vertically with using CSS is a task that presents some difficulty for developers. However, there are several methods for solving it, which are quite simple. IN this lesson 6 options presented vertical centering content.

Let's start with general description tasks.

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 installation left and right margins.

Most people using text-align property: , access the vertical-align property to center vertically. 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 the value being calculated special algorithm(usually the line height is obtained).

But unfortunately, the vertical-align property does not work on block-level elements (for example, paragraphs inside div element). This situation may lead one to believe that there is no solution to the vertical alignment problem.

But there are other centering methods block elements, the choice of which depends on what is centered with respect 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 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 height element .

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. Any values ​​can be used larger size text font.

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: 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 method described above, in in this case the content can be dynamic as the div element will resize 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 left one gets into the center top corner 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 at the top and bottom of the parent element.

HTML:

CSS:

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

In code Example CSS top and bottom margins are set 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.

For dynamic change element sizes used relative units measurements. 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. 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 a floating empty div element.

The top border of the nested div element is directly below lower limit 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 suits the best way according to requirements.

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 parent block*/ }

If you need to level inline element in 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:

.wrapper(text-align: center;)

1.3. If the block has a width and needs to be centered on its parent block:

.wrapper (position: relative; /* set for the parent block relative positioning, in order to then absolutely position the block inside it*/) .box ( width: 400px; position: absolute; left: 50%; margin-left: -200px; /*shift the block to the left by a distance equal to half its width*/ )

1.4. If the blocks don't have a width specified, you can center them using a parent wrapper block:

.wrapper (text-align: center; /*place the contents of the block in the center*/) .box ( display: inline-block; /*arrange the blocks in a row horizontally*/ margin-right: -0.25em; /*remove the right space between blocks*/ )

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:

.wrapper (position: relative;).box ( height: 100px; position: absolute; top: 50%; margin: -50px 0 0 0; )

2.3. Vertical alignment by table type:

.wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. If a block has a given width and height and needs to be centered on its parent block:

.wrapper ( position: relative; ) .box ( height: 100px; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: auto; /*to the content did not spread */ )

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

h1 ( margin: 0; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; )

Very often the task is to align a block in the center of the page / screen, and even so that without a Java script, without setting rigid dimensions or negative indents, and so that the scrollbars work for the parent if the block exceeds its size. There are quite a lot of monotonous examples on the Internet on how to align a block to the center of the screen. As a rule, most of them are based on the same principles.

Below are the main ways to solve the problem, their pros and cons. To understand the essence of the examples, I recommend reducing the height/width of the Result window in the examples at the links provided.

Option 1: Negative indentation.

Positioning block using the top and left attributes by 50%, and knowing the height and width of the block in advance, set a negative margin, which is equal to half the size block. A huge disadvantage of this option is that you need to count negative indents. Also block does not behave quite correctly when surrounded by scrollbars - it is simply cut off because it has negative margins.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 50%; left : 50%; margin: -125px 0 0 -125px; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; ) )

Option 2. Automatic indentation.

Less common, but similar to the first. For block set the width and height, position with the top attributes right bottom left to 0, and set margin auto. The advantage of this option is working scrollbars parent, if the latter has 100% width and height. The disadvantage of this method is the rigid setting of dimensions.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; ) .block ( width: 250px; height: 250px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; img (max-width: 100%; height: auto; display: block; margin: 0 auto; border: none; )

Option 3. Table.

Let's ask parent table styles, cell parent Set the text alignment to center. A block we set the line block model. The disadvantages we get are non-working scrollbars, and in general, the aesthetics of the “emulation” of the table are not.

Parent ( width: 100%; height: 100%; display: table; position: absolute; top: 0; left: 0; > .inner ( display: table-cell; text-align: center; vertical-align: middle; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

To add a scroll to this example, you will have to add one more element to the design.
Example: jsfiddle.net/serdidg/fk5nqh52/3.

Option 4. Pseudo-element.

This option is devoid of all the problems listed in the previous methods, and also solves the original problems. The point is that parent set styles pseudo element before, namely 100% height, center alignment and inline block model. It’s the same with block a line block model is placed, centered. To block didn't "fall" under pseudo element, when the dimensions of the first one are greater than parent, indicate parent white-space: nowrap and font-size: 0, after which block cancel these styles with the following - white-space: normal. In this example, font-size: 0 is needed to remove the resulting space between parent And block due to code formatting. The space can be removed in other ways, but it is considered best to simply avoid it.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before ( height: 100%; display: inline-block; vertical-align: middle; content: ""; ; img (display: block; border: none; ) )

Or, if you need the parent to take up only the height and width of the window, and not the entire page:

Parent ( position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before ( height: 100%; display: inline-block; vertical-align: middle; content: ""; ( display: block; border: none; ) )

Option 5. Flexbox.

One of the simplest and most elegant ways is to use flexbox. It does not require unnecessary body movements, quite clearly describes the essence of what is happening, and is highly flexible. The only thing worth remembering when choosing this method is support for IE from version 10 inclusive. caniuse.com/#feat=flexbox

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block ( background: #60a839; img ( display: block; border: none; ) )

Option 6. Transform.

Suitable if we are limited by the structure, and there is no way to manipulate the parent element, but the block needs to be aligned somehow. The css function translate() will come to the rescue. A value of 50% absolute positioning will position the top left corner of the block exactly in the center, then a negative translate value will move the block relative to its own dimensions. Please note that negative effects may appear in the form of blurred edges or font style. Also, this method can lead to problems with calculating the position of the block using java-script. Sometimes to compensate for the loss of 50% of the width due to using css The left property can be helped by the rule specified for the block: margin-right: -50%; .

Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; ) .block ( position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); img (display: block; ) )

Option 7. Button.

User azproduction option where block framed in a button tag. The button has the property of centering everything that is inside it, namely the elements of the inline and block-line (inline-block) model. In practice I do not recommend using it.

Parent ( width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: auto; background: none; border: none; outline: none; ) .block ( display: inline-block; img (display: block;; border: none; ) )

Bonus

Using the idea of ​​the 4th option, you can set external margins for block, and the latter will be adequately displayed surrounded by scrollbars.
Example: jsfiddle.net/serdidg/nfqg9rza/2.

You can also align the image to the center, and if the image is larger parent, scale it to size parent.
Example: jsfiddle.net/serdidg/nfqg9rza/3.
Example with a large picture:

Good day, subscribers and readers of this publication. Today I want to go into detail and tell you how to center text in CSS. In some previous articles, I indirectly touched on this topic, so you have some knowledge in this area.

However, in this publication I will tell you about in all possible ways alignment of objects, and also explain how to indent and red lines in paragraphs. So let's start learning the material!

HTML and its offspring and align

This method is almost never used, since it has been replaced by cascading style sheet tools. However, knowing that such a tag exists will not hurt you.

Regarding validation ( this term is described in detail in the article ""), then the html specification itself condemns the use < center>, since for validity it is necessary to use a transition DOCTYPE>.

This typeallows prohibited elements to pass through.

Now let's move on to the attribute align. It sets the horizontal alignment of objects on and fits after the tag declaration. Typically, it can be used to align content to the left ( left), along the right edge ( right), centered ( center) and by text width ( justify).

Below I will give an example in which I will place the picture and paragraph in the center.

This content will be centered.

Please note that for the image the attribute we are analyzing has slightly different meanings.

In the example I used align="middle". Thanks to this, the image was aligned so that the sentence was located clearly in the middle of the picture.

Centering tools in css

CSS properties designed to align blocks, text and graphic content are used much more often. This is primarily due to the convenience and flexibility of implementing styles.

So let's start with the first property of text centering - this is text-align.

It functions in the same way as align in . Among the keywords you can choose one of general list or inherit the characteristics of an ancestor ( inherit).

I would like to note that in css3 you can set 2 more parameters: start– depending on the rules of writing text (from right to left or vice versa), sets the alignment to the left or right (similar to the work left or right) and end– the opposite of start (when writing text from left to right it acts as right, when writing from right to left – left).

Sentence on the right

Sentence using end

I'll tell you about a small trick. When selecting a value justify last line may dangle unsightly from below. In order to, for example, position it in the center, you can use the property text-align-last.

To align site content or table cells vertically, use the property vertical-align. Below I have described the main keywords element.

Keyword	Purpose
baseline	Specifies alignment to an ancestor line, called the base line. If the ancestor object does not have such a line, then alignment occurs along the lower border.
middle	The middle of the mutated object is aligned to the baseline, to which the height floor of the parent element is added.
bottom	The bottom of the selected content adjusts to the bottom of the object below it.
top	Similar to bottom, only with top part object.
super	Makes the character superscript.
sub	Makes the element subscript.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

C IN E TABOUTTO

C IN E TABOUTTO

Indentations

And finally we come to paragraph indents. IN css language uses a special property called text-indent.

With its help you can make both a red line and a protrusion (you need to specify a negative value).

To create a red line you only need to know one parameter.

This is the simple text-indent property.