What is DIV

The name of the element comes from the English word division, which means division. When writing markup, it is used to break elements into blocks. DIVs enclose groups of content on a web page. For example, images, paragraphs with text. The tag does not affect the display of content in any way and does not carry any semantic load.

DIV supports all global attributes. But for web design you only need two - class and id. You will only remember about everyone else in exotic cases, and that’s not a fact. The align attribute, which used to be used to center or left align divs, has been deprecated.

When to use DIVs

Imagine that the site is a refrigerator, and the DIVs are plastic containers into which you need to sort the contents. You wouldn't put fruit in the same container with liverwurst. You will place each type of product separately. Web content is generated in a similar way.

Open any website and divide it into meaningful blocks. Header at the top, footer at the bottom, main text in the center. On the side there is usually a smaller column with advertising content or a tag cloud.

Now look at each section in more detail. Start with header. The site header has a separate logo, navigation, first-level heading, and sometimes a slogan. Assign each semantic block its own container. This will not only separate the elements in the flow, but also make them easier to format. You'll find it much easier to center an object in a DIV tag by giving it a class or ID.

Centering DIVs Using Margins

When processing web elements, the browser considers three properties: padding, marging and border. Padding is the space between content and its border. Margin - fields that separate one object from another. Border is the lines along the blocks. They can be assigned to all of them at once or only to one side:

These properties add space between objects and help you align and place them properly. For example, if a block with an image needs to be shifted from the left edge to the center by 20%, you assign a margin-left to the element with a value of 20%:

Block-with-img( margin-left: 20%; )

Elements can also be formatted using their width values ​​and negative padding. For example, there is a block with dimensions 200px by 200px. First, let's assign it an absolute position and move it to the center by 50%.

Div( position: absolute; left: 50%; )

Now, to ensure that the centered DIV is positioned perfectly, we give it a negative margin to the left equal to 50% of its width, that is -100 pixels:

Margin-left: -100px;

In CSS this is called "air removal". But it has a significant drawback in the need to make constant calculations, which is quite difficult to do for elements with several levels of nesting. If the padding and border-width values ​​are specified, the browser will by default calculate the dimensions of the container as the sum of the thickness of the borders, the padding on the right and left, and the content itself inside, which can also come as a surprise.

So when you need to center a DIV, use the box-sizing property with the value border-box. This will prevent the browser from adding padding and border values ​​to the overall width of the DIV element. To raise or lower an element, also use negative values. But in this case, they can be assigned to either the top or bottom field of the container.

How to center a DIV block using automatic margins

This is an easy way to center large blocks. You simply assign the width of the container and the margin property to auto. The browser will place a block in the middle with equal margins on the left and right, doing all the work itself. As a result, you do not risk getting confused in mathematical calculations and significantly save your time.

Use the auto-field method when developing responsive apps. The main thing is to assign a width value to the container in em or percentage. The code in the example above will center the DIV and on any device, including mobile phones, it will occupy 90% of the screen.

Alignment via display property: inline-block

By default, DIV elements are considered block elements, and their display value is block. For this method you will need to override this property. Only suitable for DIVs with a parent container:

An element with the outer-div class is assigned a text-align property with a value of center, which centers the text inside. But for now the browser sees the nested DIV as a block object. For the text-align property to work, the inner-div must be treated as lowercase. So in the CSS table for the inner-div selector you write the following code:

Inner-div( display: inline-block; )

You change the display property from block to inline-block.

transform/translate method

Cascading style sheets make it possible to move, skew, rotate, and otherwise transform web elements at will. The transform property is used for this. The values ​​indicate the desired transformation type and degree. In this example we will work with translate:

The translate function moves an element from its current position left/right and up/down. Two values ​​are passed in brackets:

• degree of horizontal movement;
• degree of vertical movement.

If an element needs to be moved along only one of the coordinate axes, then after the word translate you indicate the name of the axis and in parentheses the amount of the required displacement:

Transform: translateY(-20%);

In some manuals you can find transform with vendor prefixes:

Webkit-transform: translate(50%, 50%); -ms-transform: translate(50%, 50%); transform: translate(50%, 50%);

In 2018, this is no longer necessary; the property is supported by all browsers, including Edge and IE.

In order to center the DIV we want, the CSS translate function is written with a value of 50% for the vertical and horizontal axis. This will cause the browser to offset the element from its current position by half its width and height. The width and height properties must be specified:

Keep in mind that the element to which the transform property is applied moves independently of the objects surrounding it. On the one hand, this is convenient, but sometimes by moving, the DIV can overlap another container. Therefore, this method of centering web components is considered non-standard and is used only in cases of extreme necessity. Transformations according to all CSS canons are used for animation.

Working with Flexbox layout

Flexbox is considered a sophisticated way to design web layouts. But if you master it, you will realize that it is much simpler and more pleasant than standard formatting methods. The Flexbox specification is a flexible and incredibly powerful way to handle elements. The name of the module is translated from English as “flexible container”. The values ​​of width, height, and arrangement of elements are adjusted automatically, without calculating indents and margins.

In previous examples, we already worked with the display property, but we set it to block and inline-block values. To create flex layouts we will use display: flex. First we need a flex container:

To convert it to a flex container in cascading tables, we write:

Flex-container( display: flex; )

All nested objects, but only direct descendants, will be flex elements:

If you place a list inside a flex container, then the li list items are not considered flex elements. Flexbox layout will only work on ul:

Rules for placing flex elements

To manage flex items, you need justify-content and align-items. Depending on the values ​​you specify, these two properties automatically place objects as needed. If we need to center all nested DIVs, we write justify-content: center, align-items: center and nothing else. The browser will do the rest of the work itself:

To center text on DIVs that are flex items, you can use the standard text-align technique. Or you can make each nested DIV also a flex container and manage the content using justify-content. This method is much more rational if it contains a variety of content, including graphics, other nested objects, including multi-level lists.

CSS - Layout and center alignment of site pages

Our page consists of four blocks: header, menu, content and footer. To center the page, we'll place these four blocks into one main block:

Site header

Content

Bottom of the site

Using this structure as an example, we will consider several options.

Layout and centering of a rubber site

When laying out a rubber site, the main unit of measurement used is -%, because the site should stretch across the width and occupy all the free space.

Therefore, the width of the "header" and "footer" blocks will be 100% of the screen width. Let the width of the "menu" block be 30%, and the "content" block should be located next to the "menu" block, i.e. it must have a left margin (margin-left) with a width equal to the width of the "menu" block, i.e. 30%.

To make the "menu" and "content" blocks side by side, let's make the "menu" block floating and push it to the left edge. We will also set the background colors for our blocks. Now let's write all this in the style sheet (on the style.css page)

#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float :left; width:300px; text-align:center; font-size:18px; #content(background:#ffffff; margin-left:30% ; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:100%; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px )

The height of the blocks was set conditionally so that the result was visible. Look at our page in your browser:

If you change the size of the browser window, the width of all blocks will change. This is not always convenient, because... When the menu block is stretched, empty space appears. Therefore, the width of the “menu” block is often fixed, so let’s do the same. To do this, replace the values ​​of the corresponding properties in the style sheet:

... #menu( background:#6173cb; float:left; width:200px; height:300px; ) #content( background:#ffffff; margin-left:200px; height:300px; ) ...

Now our page stretches more naturally. With fluid layout, pages occupy the entire width of the screen, so page alignment is not required.

But if you want, you can make your page have equal padding on the left and right of the screen. To do this, you need to add a style to the "main" block, which is a container for all other blocks:

Now our page looks like this:

Layout and centering of the site, fixed width

In this case, we will have to set fixed sizes for our blocks:

#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font- size:14px; padding-top:10px )

Now our page is pressed to the left edge of the screen.

In this case, center alignment of site pages can be done as follows. Let's remember that our page has a "body" tag, which can also be given a width and some padding.

Let's do this: give the "body" tag a width of 800 pixels (like the "main" block) and a padding-left of 50%. Then the entire contents of the "main" block will be displayed on the right side of the screen (i.e. from the middle to the right):

In order for our “main” block to be located in the middle of the screen, its middle must coincide with the middle of the “body” tag. Those. you need to shift the "main" block to the left by half its size. The width of the "main" block is 800 pixels, which means you need to set the property "margin-left:-400px" to it. Yes, this property can take negative values, then the left margin is reduced (i.e. shifted to the left). And this is exactly what we need.

The style sheet now looks like this:

body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px;text-align:center;font-size:14px;

And our page in the browser is located exactly in the middle:

We looked at two options for centering site pages; in fact, they are not dogma. You can experiment and come up with your own version, just check how it works in different browsers. Unfortunately, what displays well in FireFox or Opera may display completely incomprehensibly in IE and vice versa. And we must remember this.

Good luck to you in your creative quest!



If you found this site helpful, please check out our other

We analyze the alignment of block elements in CCS. We place several in the center DIV or LI elements. I offer several of my options for most cases.

This article does not aim to list all alignment options and rewrite what already exists somewhere. I don’t remember why, but I was often not satisfied with the options offered. Either there were fixed blocks, or everything fell apart during adaptive layout, or some other shortcomings.

Sometimes, to align to the center, it’s enough to add a couple of attributes and you don’t need anything complicated. For example, so am I.

Below are several options for adaptive layout for aligning blocks in the center, which I I use on their websites. And if the first one is quite common, then perhaps some other methods will not even be described on the Internet in exactly this way.

Option 1

Simple alignment of all blocks to the center of the page.

Let's center UL content of 4 elements LI, which are in the block DIV with class container.

In this case, the following rules in CSS are sufficient:

Container (
width: 100%;
}

Container ul (
text-align: center;
list-style: none;
}

Container li (
display: inline-block;
}

We get the following view: There are 4 LI elements centered here. When the screen size is reduced, elements that do not fit are moved down.

If blocks LI with these properties are not installed in the center, which means some other property is interfering with them. For example, this could be the property float:left or display: table; or some other.

You can now add other styles to the top structure (into the basic CSS alignment framework). For example, make blocks of a fixed size and indent each other:

Container li (
display: inline-block;
margin: 5px;
width: 100px;
}

We get the following:

But there is one drawback to this option. The blocks are located in the center, but there are huge distances to the left and right. They can be reduced by changing the width.

Or you can make containers of the same size so that there are indents only between the containers, and there will be none on the left and right.

Then we'll remove margin and add the width of this width so that it completely covers the area.

Container li (
vertical-align: top;
display: inline-block;
width: 32.899%;
}

There will be a small area of ​​empty space between the blocks. And to make it even larger, you can retreat inside using the parameter padding.

In the blocks, I deliberately do not add anything extra in order to leave exactly those styles that directly affect the alignment. But if you do the same, you won’t get such blocks. If only because, firstly, you need to add color to the block, and secondly, if it’s empty, put height: 100px;. Other attributes are to your liking.

The final option is:

In the screenshot above, I left other areas of the site so that it is clear where the boundaries of the blocks are, because if they are adjacent to the edge, then the edge itself is no longer visible. And in the picture, the white edges on the left and right are a different alignment that has nothing in common with the example in question. I repeat, the blocks themselves are adjacent to the edges, which are not visible, because the blocks completely cover them.

Option 2

There are many ways to center blocks. But if you need to make the alignment smarter, you have to rack your brains. Fortunately, I came up with an interesting method for the following purposes:

How do I center all divs so that the block on the next line is left aligned?

We have the following structure:

We write classes for them:

width: 90%;
margin: 0 auto;
}

Archive-article (
display: inline-block;
vertical-align: top;

Width: calc(33.3333% - (0.666666666667 * 36px));
margin: 0 10px 0 11px;
}

Please note that if you change sizes calc, then you need to experimentally adjust the dimensions margin. Otherwise the blocks will not be centered.

This alignment has to be done by eye. But if there are fewer blocks on the new line than on the line above, this lonely block will be with left side. And it looks much nicer than when on the next line one single block is located in the center.

By applying the technique above, we will get an adaptive layout, with all edges equal, which will not deteriorate when changing screen sizes.

And if we want the mobile version to have not 3 blocks, but 2, then in ccs for a resolution of 768 pixels, we will divide the blocks differently:

@media screen and (max-width: 768px) (
.archive-article (
width: calc(47.3333% - (0.666666666667 * 25px));
margin: 0 10px 0 20px;
}
}

Let's get the same blocks in the mobile version, but with two blocks per line:

Option 3

Now we will align using flex. This may seem like the ideal way to level, because it actually works very simply. However, FLEX does not cope with the task described in option 2. At least, I was not able to achieve the same results.

To next section:

Adding styles:

#cssmenu (
margin: 20px auto;
}

#cssmenu ul (
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#cssmenu > ul > li (
margin: 1px;
}

We get:

In the given example:

flex-wrap: wrap;

Moves blocks to the next line if they fill the container. Otherwise, they will go further outside the browser window.

justify-content: center;

We align the contents of the blocks to the center.

Option 4

Another alignment option using flex technology.

We have a container with two blocks inside. We need these 2 blocks to divide the width into two equal sides.

To do this, we will write the following properties in the styles:

Container (
display: flex;
}

Block (
flex-basis: 100%;
}

Option 5

There is another option for centering the blocks, if their number is strictly equal. For example: there are 9 blocks, 3 for each line. And you know that it will always remain this way. For example, you are creating a landing page and you know for sure that nothing unnecessary will be added to the site between these blocks.

So, we have 9 blocks of the following type (I didn’t duplicate the lines 9 times, but keep in mind that there are 9 blocks):

Apply styles for them:

Archive-container-for-articles (
width: 100%;
text-align: center;
}

Archive-article (
width: 25%;
vertical-align: top;
display: inline-block;
text-align: left;
}

Archive-article:nth-child(1),
.archive-article:nth-child(4),
.archive-article:nth-child(7) (
margin: 20px 0 30px 40px;
}

Archive-article:nth-child(2),
.archive-article:nth-child(5),
.archive-article:nth-child(8) (
margin: 20px 40px 30px;
}

Archive-article:nth-child(3),
.archive-article:nth-child(6),
.archive-article:nth-child(9) (
margin: 20px 40px 30px 0;
}

We will also get an adaptive layout. When the screen is reduced, the block that does not fit will go to the bottom center

The advantage of this type of centering is that you can clearly and clearly make indentations between blocks.

The main drawback is that nothing can be placed inside the blocks. Any element:

be it div or p or something else, will be considered as an internal element nth-child. As a result, CSS styles will be superimposed on it and all indents made using margin will shift the blocks differently than originally intended.

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

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 all the different ways to align objects, and also explain how to indent and redline 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.

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