/ / Center alignment: CSS layout

Center alignment: CSS layout

When you make a page, you often need tocenter alignment in a CSS way: 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

center alignment css

Often for decorative purposes, you need to specifytext alignment in 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 aligning the text using style sheets. Unlike blocks for which you want 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 parentall 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 indents.

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 need to set the center alignment of the div, CSScan offer a fairly convenient way: the use of external margins margin. Indents can be assigned to both block elements and row-by-block ones. The value of the property must be 0 (vertical) and auto (horizontal indentation):

  • margin: 0 auto;

Now this option is recognized absolutelyvalid. The use of external indentation also allows you to set the alignment of the picture in the center: CSS property margin allows solving many problems related to positioning an element on the page.

align the div in the center css

Align the block to the left or the right edge

Sometimes centering in a CSS way is notIt is required, but it is necessary to put two blocks nearby: one from the left edge, another - from the right. For this, there is a float property that 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 rightfall out of the general flow, that is, all other elements ignore the very existence of the aligned elements. The clear: both property allows a 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 downward.

Vertical alignment

There are times when it's not enough to askalignment in the center by CSS methods, it is also necessary 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. The inner block is a line-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.

alignment of the picture in the center css

Possible problems with aligned blocks

Sometimes aligning the div around the center of the CSS methodcan cause small problems. For example, when using 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 right-aligned. After equalization, both dropped out of the stream. If the parent does not have a height (for example, 30em), then it will no longer stretch along the height of the child blocks. To avoid this error, use the "spacer" - a special block that sees .second and .third. CSS-code:

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

The pseudo class is often used:after, which also allows to return blocks to the place by creating a pseudo-distribution (in the example in the div with the class container 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 most simple and convenient way to create pseudo-scattering by experimenting.

Another problem that is often, - 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 ways, which 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.

css centering text

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.