CSS Align

CSS Align module aims to create a consistent method of alignment across all of CSS. This document details the general concepts found in the specification.

CSS Align-Centre

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.

.center {
  margin: auto;
  width: 80%;
  border: 3px Sky Blue;
  padding: 15px;
}

CSS Align- Image

To center an image, set left and right margin to auto and make it into a block element:

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

CSS Left & Right Align

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

.right {
  position: absolute;
  right: 0px;
  width: 400px;
  border: 5px Solid Green;
  padding: 15px;
}