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;

}

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:

<img src="paris.jpg" alt="Paris" style="width:45%;display:block;margin:0 auto">

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 <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;

}

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;

}