Center alignment: CSS layout

When you make a page, you often need to align in the center with a CSS method: for example, center the main unit. There are several ways to solve this problem, each of which sooner or later has to be used by any layout designer.

Align text to center

Often, for decorative purposes, you need to set the text alignment to the center, CSS in this case allows you to reduce the layout time. Previously, this was done using HTML attributes, but now the standard requires you to align the text with the help of style sheets. Unlike blocks, for which you need to change external indents, in CSS, the text is centered on the center using one line:

• Text-align: center;

This property is inherited and passed from the parent to all descendants. Affects not only the text, but also other elements. To do this, they must be lowercase (for example, span) or line-block (any blocks to which the display: block property is set). The latter option also allows you to change the width and height of the element, it is more flexible to adjust the indentation.

Often on pages align are attributed to the tag itself. This immediately makes the code invalid, since the W3C has recognized the align attribute as obsolete. Using it on the page is not recommended.

Align the block to the center

If you want to set the alignment of the div to the center, CSS can offer a fairly convenient way: using external margins margin. Indents can be assigned to both block elements and row-by-block ones. The value of the property must take the values 0 (indents vertically) and auto (automatic indents horizontally):

• Margin: 0 auto;

Now this option is recognized as absolutely valid. The use of external indents also allows you to set the alignment of the picture in the center: CSS-property margin allows to solve many problems associated with positioning an element on the page.

Align the block to the left or the right edge

Sometimes you do not need to align in the center with the CSS method, but you need to put two blocks side by side: one from the left edge, the other from the right. For this, there is a float property, which can take one of three values: left, right, or none. Let's say you have two blocks that need to be placed side by side. Then the code will be:

• .left {float: left;}
• .right {float: right}

If there is also a third block, which should be located under the first two blocks (for example, footer), then it needs to set the clear property:

• .left {float: left;}
• .right {float: right}
• Footer {clear: both}

The matter is that blocks with classes left and right drop out of the general flow, that is all other elements ignore the very existence of the aligned elements. The clear: both property allows the footer or any other block to see the elements dropped from the stream and prevents float from both left and right. Therefore, in our example, the footer will move down.

Vertical alignment

There are times when it is not enough to set the center alignment in CSS methods, you still need to change the vertical position of the child block. Any line or line-block element can be pressed to the top or bottom edge, to be in the middle of the parent element or to be in an arbitrary place. Most often, you need to align the block to the center, using the vertical-align attribute. Suppose there are two blocks, one is nested in the other. In this case, the inner block is a row-block element (display: inline-block). You must align the child block vertically:

• Alignment on the upper border - .child {vertical-align: top};
• Center alignment - .child {vertical-align: middle};
• Alignment on the lower border - .child {vertical-align: bottom};

Block elements neither text-align nor vertical-align function.

Possible problems with aligned blocks

Sometimes aligning the div around the center with a CSS method can cause minor problems. For example, if you use float: for example, there are three blocks: .first, .second, and .third. The second and third blocks lie in the first. An element with class second is left-justified, and the last block is left-aligned. After equalization, both dropped out of the stream. If the parent element has no height (for example, 30em), it will no longer stretch along the height of the child blocks. To avoid this error, use a "spacer" - a special block that sees .second and .third. CSS-code:

• .second {float: left}
• .third {float: right}
• .clearfix {height: 0; Clear: both;}

Often used is the pseudo-class: after, which also allows you to return blocks to the site by creating a pseudo-distribution (in the example in the div, the container class is inside .first and contains .left and .right):

• .left {float: left}
• .right {float: right}
• .container: after {content: ''; Display: table; Clear: both;}

The above options are the most common, although there are several variations. You can always find the simplest and most convenient way to create pseudo-scattering by experimenting.

Another problem often encountered by layout designers is the alignment of line-block elements. After each of them a space is automatically added. The margin property, which is specified by a negative indentation, helps to cope with this. There are other methods that are used much less often: for example, resetting the font size. In this case, the font-size: 0 is set in the properties of the parent element. If there is text inside the blocks, then the required font size is returned in the properties of line-block elements. For example, font-size: 1em. The method is not always convenient, so the version with external indentations is much more often used.

Aligning blocks allows you to create beautiful and functional pages: this is the layout of the overall layout, and the location of goods in online stores, and photos on the business card site.