freeCodeCamp/guide/english/css/layout-horizontal-and-vertical-align/index.md

title

title
Layout Horizontal and Vertical Align

Layout Horizontal and Vertical Align

CSS has properties that create space both around and inside an element. You will use one, or a combination of these properties to create layouts.

Properties Used To Create Layouts

You will use the following properties to align elements and create layouts:

• margin
• position
• float and clear
• text-align
• padding
• line-height

Horizontal Align

The margin property will create space around an element. Use the auto value to equally distribute remaining space on either side.

.horizontal-center {
  margin: auto;
}

Block elements must have a width set to avoid filling the viewport:

<div class="square horizontal-center"><div>

.square {
  width: 250px;
  height: 250px;
  background-color: tomato;
}
.horizontal-center {
  margin: auto;
}

Inline-block elements, such as an <img>, can be aligned by setting the display property to block.

<img src="image.jpg" alt="image">

img {
  display: block;
  width: 250px;
  margin: auto;
}

Use the position property and set left and right location of the element.

<div class="left-square"><div>
<div class="right-square"><div>

.left-square {
  position: absolute;
  left: 100px;
  width: 250px;
  height: 250px;
  background-color: tomato;
}
.right-square {
  position: absolute;
  right: 100px;
  width: 250px;
  height: 250px;
  background-color: tomato;
}

Send an element to the right, or left of the page using the float property.

img {
  float: right;
}

img {
  float: left;
}

Remember floated items are removed from the normal flow. You will need to clear your items to get the proper layout.

Text can be aligned by setting the parent element's text-align property.

div {
  text-align: center;
}

Vertical Align

Using margin there isn't an auto property to vertically align elements. You will set the distance unit for margin-top and/or margin-bottom properties.

img {
  margin-top: 100px;
  width: 250px;
  height: 250px;
}

The same applies when using the position property.

img {
  position: absolute;
  top: 100px;
  width: 250px;
  height: 250px;
}

Aligning child elements can be done by setting the parent element's padding.

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

div {
  padding: 100px 0;
}

For text, set the line-height to the parent element's height for a center alignment.

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

div {
  height: 250px;
  line-height: 250px;
}

Encouraged Reading:

• MDN Web docs: CSS Layouts
• w3schools: CSS Layout - Horizontal & Vertical Align