CSS Alignment

Align the elements in the center

To a centered horizontal elements (such as <div>), can be used margin: Auto; .

Setting the width of the element will prevent it from overflowing to the edge of the container.

The element specifies the width and evenly distributes the empty margins on both sides:

Example

.center { 
	margin: auto;
	width: 50%;
	border: 3 px solid green;
	padding: 10 px;
}

Note: If the width property is not set (or set to 100%), center alignment will not work.

Align the text to the center

If it is just for the text to be centered within the element, you can use text-align: center;

Example

.center { 
	text-align: center;
	border: 3 px solid green;
}

Image centered

Let the image centered, may be used margin: auto; and place it on the block element:

Example

img { 
	display: block;
	margin: auto;
	width: 40%;
}

Align left and right-use positioning method

We can use the position: absolute; property to align the elements:

Example

.right { 
	position: absolute;
	right: 0px;
	width: 300px;
	border: 3px solid #73AD21;
	padding: 10px;
}

Note: Absolutely positioned elements will be removed from the normal flow and can overlap elements.

Tip: When using position to align elements, usually the <body> element will set margin and padding . This avoids visible differences in different browsers.

There is a problem with IE8 and earlier versions when using the position attribute. If the container element (<div class=”container”> in our case) is set to a specified width and the !DOCTYPE declaration is omitted, then IE8 and earlier versions will add a 17px margin on the right. This seems to be the space reserved for the scroll bar. When using the position attribute, always set the !DOCTYPE declaration:

Example

body { 
	margin: 0;
	padding: 0;
} 
.container { 
	position: relative;
	width: 100%;
} 
.right { 
	position: absolute;
	right: 0px;
	width: 300px;
	background-color: #b0e0e6;
 }

Align left and right-use float method

We can also use the float attribute to align elements:

Example

.right { 
	float: right;
	width: 300px;
	border: 3 px solid #73AD21;
	padding: 10px;
}

When aligning elements like this, it is a good idea to predefine the outer and inner margins of the <body> element. This avoids visible differences in different browsers.

Note: If the height of the child element is greater than the parent element, and the child element is set to float, then the child element will overflow. At this time, you can use ” clearfix (clear float)” to solve the problem.

We can add overflow: auto; to the parent element to solve the problem of overflow of the child element:

Example

.clearfix { 
	overflow: auto;
}

There is a problem with IE8 and earlier versions when using the float attribute. If you omit the !DOCTYPE declaration, then IE8 and earlier versions will add a 17px margin on the right. This seems to be the space reserved for the scroll bar. When using the float attribute, always set the !DOCTYPE declaration:

Example

body { 
	margin: 0 ;
	padding: 0 ;
} 
.right { 
	float: right ;
	width: 300 px ;
	background-color: #b0e0e6 ;
}

Vertical center alignment-use padding

There are many ways to achieve vertical center alignment in CSS. A simple way is to use padding at the top of the head :

Example

.center { 
	padding: 70 px 0 ;
	border: 3 px solid green ;
}

If you want to center both horizontally and vertically, you can use padding and text-align: center :

Example

.center { 
	padding: 70 px 0 ;
	border: 3 px solid green ;
	text-align: center ;
}

Vertically center-use position and transform

In addition to using the padding and line-height properties, we can also use the transform property to set vertical centering:

Example

.center { 
	height: 200 px ;
	position: relative ;
	border: 3 px solid green ; 
} 
.center p { 
	margin: 0 ;
	position: absolute ;
	top: 50% ;
	left: 50% ;
	transform: translate (- 50 % ,- 50 % ) ;
}