CSS Horizontal Align
Horizontal Centering
There are several ways to horizontally center elements in CSS, depending on the type of element.
Center Align Block Elements
Use margin: auto;,
to horizontally center a block-level element (like <div>).
Also specify a
width for the element, to prevent it from stretching out to the edges of its container.
Note: Center aligning has no effect on block-level elements if the width property is not set
(or set to 100%).
Below, the <div> element is centered and has a width of 50% (and the remaining space will be split equally between the left and right margins):
This div element is centered.
Example
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Try it Yourself »
Center Align Text
To center the text inside a block-level element, use text-align: center;.
This text is centered.
Tip: For more examples on how to align text, see the CSS Text chapter.
Center Align an Image
To center an image, set
margin-left and
margin-right to auto, and
also turn the image into a block element:
Example
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Try it Yourself »
Left and Right Align - Using position
Another method for aligning elements is to use
position: absolute;:
Note: Absolute positioned elements are removed from the normal flow, and can overlap other elements.
This <div> element is positioned to the right, with the position: absolute property.
Example
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid green;
padding: 10px;
}
Try it Yourself »
Left and Right Align - Using float
Another method for aligning an element to the left or right, is to use the
float property:
Example
.right
{
float: right;
width: 300px;
border: 3px solid green;
padding: 10px;
}
Try it Yourself »
