fit on the page is often necessary to make the center alignment CSS-way: for example, to center the main unit.There are several solutions to this problem, each of which will sooner or later have to use any coder.
Align text centered
often for decorative purposes you want to set the text alignment of the center, CSS in this case, reduces the time of imposition.Previously, this was done using HTML-attributes, now standard requires aligning text using style sheets.In contrast to the block for which you want to change the outer margins, with CSS text alignment in the middle is made with a single line:
- text-align: center;
This property is inherited and passed from parent to all children.It affects not only the text but also to other elements.To do this, they must be in lower case (for example, span) or line-block (any blocks that sets the property display: block).The latter option also allows you to change the width and height of more flexible configuration of the indentation.
Often the pages align attribute to the tag itself.This immediately makes the code invalid as W3C acknowledged align attribute obsolete.Its use is not recommended on the page.
alignment block at the center
If you want to specify the alignment of the center of the div, CSS can offer a fairly easy way: use of external indentation margin.Padding can be set as a block-level elements and line-block.Svoysva value should be set to 0 (indented vertical) and auto (automatic horizontal indents):
- margin: 0 auto;
Now this option is recognized as absolutely valid.Using external padding also allows you to specify the alignment of the center: CSS-margin property allows us to solve many problems associated with the positioning element on the page.
Align block on the left or right edge
Sometimes the center alignment CSS-way is not required, but it is necessary to put two units next to one from the left side and the other - from the right.For this property there is a float, which can take one of three values: left, right, or none.Let's say you have two units that need to be put together.Then the code will be:
- .left {float: left;}
- .right {float: right}
If there is a third unit, which must be placed under the first two blocks (eg, the footer), heyou must register the property clear:
- .left {float: left;}
- .right {float: right}
- footer {clear: both}
fact that the blocks with the classes left and right fall out of the totalflow, that is, all other elements ignored the very existence of elements aligned.The property clear: both allows the footer or any other unit to see dropped from the flow elements and prohibits wrap (float) on both the left and right.Therefore, in our example, the footer will shift down.
Vertical alignment
There are cases where insufficient set center alignment CSS-ways, you must still change the vertical position of the child block.Any line or line-block element can be pressed against the top or bottom edge, located in the middle of the parent element, or be in any place.More often require alignment of the box in the center, this attribute is used vertical-align.Suppose there are two units, one inside another.The internal unit - line-block element (display: inline-block).It is necessary to align the unit vertically child:
- alignment on the upper limit - .child {vertical-align: top};
- center alignment - .child {vertical-align: middle};
- alignment at the lower end - .child {vertical-align: bottom};
on block-level elements or text-align, or vertical-align not apply.
Possible problems with aligned units
Sometimes div align the center of the CSS-way can cause minor problems.For example, using float: for example, there are three blocks: .first, .second and .third.The second and third blocks are in the first.An element with a class of second left-aligned, and the last block - on the right.After aligning the two fell out of the stream.If the parent is not defined height (eg, 30em), it will no longer stretch the height of subsidiary units.To avoid this error, use the "spacer" - a special unit, which sees .second and .third.CSS-code:
- .second {float: left}
- .third {float: right}
- .clearfix {height: 0;clear: both;}
often used pseudo: after, which also allows you to return to the blocks into place by creating psevdorasporki (in this example in a div with a class of container lies within the .first and contains .left and .right):
- .left {float: left}
- .right {float: right}
- .container: after {content: '';display: table;clear: both;}
above options - the most common, although there are some variations.You can always find the easiest and most convenient way to create psevdorasporki by experiments.
Another problem frequently encountered layout - alignment of line-block elements.After each of them automatically added space.To cope with this property help margin, which is defined by the negative indentation.There are other methods that are used less frequently, for example, resetting the font size.In this case, the properties of the parent prescribed font-size: 0.If located within blocks of text, the properties of line-block elements have returned to the desired size.For example, font-size: 1em.The method is not always convenient, so much more frequently used option with external margins.
alignment block allows you to create beautiful and functional page layout and it is the general layout and location of goods in shops, and photos on a small website.
