CSS Align

CSS Layout - Horizontal & Vertical Align

CSS has several properties for aligning elements.

Example 1: Center Align Elements

To horizontally center a block element (like <div>), use margin: auto;.

Setting the width of the element will prevent it from stretching out to the edges of its container.

Example 2: Center Align Text

To just center the text inside an element, use text-align: center;.

Example 3: Center an Image

To center an image, make it into a block element and apply margin: auto;.

Example 4: Left and Right Align - Using Position

One method for aligning elements is to use position: absolute;.

Example 5: Left and Right Align - Using Float

Another method for aligning elements is to use the float property.

Example 6: Center Vertically - Using Padding

There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding.

Example 7: Center Vertically - Using Flexbox

You can also use flexbox to center things.

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}