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
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
This div element is centered.
Example
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Center Align Text
To center the text inside a block-level element, use text-align: center;.
This text is centered.
Example
p {
text-align: center;
}
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%;
}
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
Example
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid green;
padding: 10px;
}
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;
}
Want to go beyond the notes?
Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.
Enroll Now — Free Demo AvailableHorizontal Align – FAQs
Quick answers about learning Horizontal Align in CSS.
