CSS Alignment (Element Alignment)

CSS has several properties that can be used to align web elements.

Text Alignment

Can be aligned correctly throughText Alignmentto alignBlock-levelText within elements.

h1　{
　　　　text-align:　center;
}
p　{
　　　　text-align:　left;
}

Please refer toCSS TextTutorial to learn more about text formatting.

Center Alignment Using the margin Property

Block-levelThe center alignment of an element is one of the most important meanings of the CSS margin property. For example, by setting the left and right margins to auto, the <div> container can be horizontally centered.

div　{
　　　　width:　50%;
　　　　margin:　0　auto;
}

The style rules in the above example horizontally center-align the elements.

Align Elements Using the position Property

CSS positionUsing left, right, top, and bottom properties combined with and, it is possible to align elements relative to the viewport of the document or within the parent element.

.up　{
　　　　position:　absolute;
　　　　top:　0;
}
.down　{
　　　　position:　absolute;
　　　　bottom:　0;
}

For more information on positioning elements, please refer toCSS PositioningTutorial.

Align Left and Right Using the float Property

CSSfloatThe property can be used to align the elements of its containing block to the left or right in such a way that other content can flow along its side.

Therefore, if an element floats to the left, the content will flow along its right side. Conversely, if an element floats to the right, the content will flow along its left side.

div　{
　　　　width:　200px;
　　　　float:  left;
}

Clear Floating

One of the most confusing things about floating layouts is the collapsed parent. The parent element does not automatically stretch to contain the floating element. However, if the parent does not contain any visually detectable background or border, this is not always obvious, but it is very important to pay attention and handle it properly to prevent strange layouts and cross-browser issues. Please refer to the following figure:

You will see

Elements do not automatically stretch to accommodate floating images. This problem can be solved by clearing the float after the floating element in the container but before the closing tag of the container element.

Fix Collapsed Parent

There are several methods to solve the CSS collapsing parent problem. The next section will introduce these solutions and real-time examples.

Solution1Floating container

The simplest way to solve this problem is to float the containing parent element.

.container  {
　　　　float:  left;
　　　　background:  #f2f2f2;
}

Solution2Using empty Div

This is an old method, but it is a simple solution that can be used in all browsers.

.clearfix  {
　　　　clear:  both;
}
/*　html code snippet　*/

You can also do this through the tag. However, it is not recommended to use this method because it will add non-semantic code to the markup.

Solution3Using the :after pseudo-element

The :after Pseudo-elementsWith the unioncontentProperty has been widely used to solve the problem of floating calculation.

.clearfix:after  {
　　　　content:  ".";
　　　　display:  block;
　　　　height:  0;
　　　　clear:  both;
　　　　visibility:  hidden;
}

The .clearfix class is suitable for any container with floating children.