CSS Layout - Horizontal & Vertical Alignment
Horizontal & Vertical Centering
Center Aligning Elements
To horizontally center an element (like a <div>), you can use margin: auto;.
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element is centered by specifying the width and evenly distributing the outer margins on both sides:
The div element is centered.
Example
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Note: Centering will not work if the width property is not set (or set to 100%).
Text Centering
If you only want to center the text inside an element, you can use text-align: center;.
Text is centered.
Example
.center {
text-align: center;
border: 3px solid green;
}
Tip: For more text alignment examples, see the CSS Text section.
Centering Images
To center an image, you can use margin: auto; and place it inside a block element:
Example
img {
display: block;
margin: auto;
width: 40%;
}
Aligning Left and Right - Using Positioning
We can use position: absolute; to align elements:
tutorialpro.org -- Learning is not only about technology, but also about dreams!!!
Example
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Tip: When using position to align elements, it is common to set margin and padding for the <body> element. This helps avoid visible differences in different browsers.
When using the position property, there is an issue with IE8 and earlier versions. If the container element (in our case, the <div class="container">) has a specified width and the !DOCTYPE declaration is omitted, IE8 and earlier versions will add a 17px margin on the right. This seems to be reserved for the scroll bar. When using the position property, 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;
}
Aligning Left and Right - Using Float
We can also use float 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 margins and padding for the <body> element. This helps avoid 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, the child element will overflow. You can use "
clearfix" to solve this problem.
We can add overflow: auto; to the parent element to solve the overflow problem:
Example
.clearfix {
overflow: auto;
}
When using the float property, there is an issue with IE8 and earlier versions. If the !DOCTYPE declaration is omitted, IE8 and earlier versions will add a 17px margin on the right. This seems to be reserved for the scroll bar. When using the float property, always set the !DOCTYPE declaration:
Example
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
Vertical Centering - Using Padding
There are many ways to achieve vertical centering in CSS. One simple way is to use padding at the top:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid green;
}
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
To center both horizontally and vertically, you can use padding and text-align: center:
I am centered both horizontally and vertically.
Example
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
Vertical Centering - Using line-height
I am vertically centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the following code: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Vertical Centering - Using position and transform
In addition to using padding and line-height properties, we can also use the transform property to achieve 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: More information on the transform property can be found in the 2D Transforms section.