CSS Alignment
Align The Elements to 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:
div element is centered.
Example
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}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;
Align the text to the center
Example
.center
{
text-align: center;
border: 3px solid green;
}Tip: For more examples of text alignment, please refer to the CSS text chapter.
Center An Image
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 Position Property
We can use the position: absolute; property to align the elements:
Tutorial Fish - Lots of useful tutorials!
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 Property
We can also use the float attribute to align elements:
Example
.right
{
float: right;
width: 300px;
border: 3px 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 use 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: 300px;
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: 70px 0;
border: 3px solid green;
}If you want to center both horizontally and vertically, you can use padding and text-align: center :
Example
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}Center Vertically - Use line-height
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following codes: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}Center Vertically - Use osition 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: 200px;
position: relative;
border: 3px solid green;
}
.center p
{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Tip: For more information about transform properties, please refer to the CSS3 2D flip chapter .