Center Alignment: CSS Layout

When layouting a page, it is often necessary to center the CSS in a way: for example, center the main block. There are several options for solving this problem, each of which sooner or later must be used by any typesetter.

Center text alignment

Often, for decorative purposes, you need to set the text to center alignment, CSS in this case can reduce the layout time. Previously, this was done using HTML attributes, but now the standard requires text to be aligned using style sheets. Unlike blocks for which you need to change the outer margins, in CSS text alignment is centered using a single line:

• text-align: center;

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

Often on pages align is attributed to the tag itself. This immediately makes the code invalid because the W3C has made the align attribute obsolete. Using it on a page is not recommended.

Center Alignment

If you want to set the alignment of the div in the center, CSS can offer a fairly convenient way: using external margin indents. Indentation can be set for both block elements and line-block ones. The property value should take the values ​​0 (vertical indentation) and auto (automatic horizontal indentation):

• margin: 0 auto;

Now it is this option that is recognized as absolutely valid. Using indentation also allows you to set the alignment of the image in the center: the CSS margin property allows you to solve many problems associated with positioning an element on the page.

Left or Right Block Alignment

Sometimes CSS center alignment is not required, but you need to put two blocks side by side: one from the left edge and the other from the right. To do this, there is a float property that can take one of three values: left, right, or none. Suppose you have two blocks that need to be placed side by side. Then the code will be like this:

• .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 register the clear property:

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

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

Vertical alignment

There are times when it is not enough to set center alignment with CSS methods, you also need to change the vertical position of the child block. Any inline or inline-block element can be pressed to the top or bottom edge, located in the middle of the parent element, or in any place. Most often, alignment of the block in the center is required; for this, the vertical-align attribute is used. Suppose there are two blocks, one nested in the other. In this case, the internal block is a line-block element (display: inline-block). It is necessary to align the child block vertically:

• top alignment - .child {vertical-align: top};
• center alignment - .child {vertical-align: middle};
• bottom alignment - .child {vertical-align: bottom};

Neither text-align nor vertical-align affect block elements.

Possible problems with aligned blocks

Sometimes centering the div in a CSS way can cause minor problems. For example, when using float: let's say there are three blocks: .first, .second and .third. The second and third blocks are in the first. An element with class second is left-aligned and the last block is right-aligned. After leveling, both fell out of the stream. If the parent element does not have a height (for example, 30em), then it will stop stretching 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;}

The: after pseudo-class is often used: it also allows you to return blocks into place by creating a pseudo-spacer (in the example in the div with the class container, it lies 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 easiest and most convenient way to create pseudo-samples by experimentation.

Another problem that typesetters often encounter is the alignment of inline-block elements. After each of them, a space is automatically added. The margin property, which is set to a negative indent, helps to cope with this. There are other ways that are used much less frequently: for example, resetting the font size. In this case, font-size: 0 is specified in the properties of the parent element. If the text is located inside the blocks, then the desired font size is already returned in the properties of inline-block elements. For example, font-size: 1em. The method is not always convenient, therefore, the option with external indents is much more often used.

Alignment of blocks allows you to create beautiful and functional pages: this is the layout of the general layout, and the location of goods in online stores, and photographs on a business card site.