CSS Alignment: How to Center or Otherwise Align Elements in a Webpage

CSS horizontal align

Aligning inline elements

Inline elements and text are the easiest to align. You can do that by using the text-align property:

.center{     
  text-align: center;
  border: 4px solid black;
}

This property can take one of six possible values:

Using margins for block elements

To make CSS center or otherwise align a block element, set both its left and right margins to auto. See how to center div elements in the example below:

.center{     
  margin: auto;
  padding: 15px;     
  border: 4px solid black;
  width: 88%; 
}

Note: for this to work, an element has to have a set width.

To be able to do the same to any element, you can apply a display property with its value set to block to it. For example, to center an image horizontally, you would follow the example below:

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

Tip: to place multiple block elements in one row, apply the display property with its value set to inline-block to them.

Modifying position

If you only have one element in the container, you can also align it horizontally by using the position property. If you define the absolute value, the position will be fixed, which means that the element may overlap other elements to keep its particular place when a user resizes the window or scrolls:

.left{       
  left: 15px;
  position: absolute;   
  border: 4px solid black;
  padding: 15px;   
  width: 550px;
}

Note: if you have multiple elements in one container, the absolute position will be applied to all of them.

Making elements float

You can also align elements using the float property:

 .left {
    float: left;
    border: 4px solid black;
    padding: 15px;
    width: 550px;
}

The float property is different from absolute position in two aspects. First, it places an element on the specified side of the container so that text and other inline elements can wrap around it.

Secondly, the floated element is removed from the normal flow of the page. However, it does remain a part of the flow in a sense that other elements don’t ignore it completely (which they do for absolutely positioned elements).

When you float an image or another element that has a bigger height than its container, such element overflows the boundaries of the container. You can prevent this by applying the overflow property with its value set to auto:

.clearfix {
    overflow: auto;
}

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

EXCLUSIVE: 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

15% OFF

Pros

• Easy to navigate
• No technical issues
• Seems to care about its users

Main Features

• Huge variety of courses
• 30-day refund policy
• Free certificates of completion

AS LOW AS 14.99$

CSS vertical align

Inline elements and vertical-align

The vertical align CSS method can be used for inline elements:

img.first {
    vertical-align: baseline;
}

img.second {
    vertical-align: text-top;
}

img.third {
    vertical-align: text-bottom;
}

img.fourth {
    vertical-align: sub;
}

img.fifth {
    vertical-align: super;
}

Note: vertical-align will also work on table cells and elements that have their display property set to table-cell.

Centering with padding

Just like margins can be used for horizontal alignment, padding can help you center elements vertically. All you need to do is apply equal-sized padding on the top and the bottom of the element:

.center {
    padding: 30px 0;
    border: 4px solid black;
}

This option is great when you aren't sure about the exact dimensions of the element and therefore cannot count where exactly is the middle.

Note: make sure to define the right and left padding as 0px: if you only specify one value for padding, CSS will use it for all four sides of the element.

To center text both vertically and horizontally, you can combine padding with text-align: center:

.center {
    padding: 30px 0;
    border: 4px solid black;
    text-align: center;
}

Aligning with line-height

You can also center an element vertically by setting the line-height value to be identical as the height of the element. This gives a similar effect as setting equal padding:

.center {
    border: 4px solid black;
    text-align: center;
    line-height: 100px;
    height: 100px;
}

/* Add the following in case the text has more than one line: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

Have in mind though that this method is only suitable when you have a single line of text to center. However, this method may work better for specific fonts, as it sets the baseline correctly. That ensures the text appears to be precisely in the middle. Still, this argument is only valid when you set it using pixel values.

Combining position and transform

One more way to vertically center an element is by using position and transform together. There may be situations where neither padding nor line-height are suitable options – e.g., if your container has a fixed width and multiple lines of text:

.center {
    border: 4px solid black;
    height: 100px;
    position: relative;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CSS align: useful tips

• You'll find it easier to align elements if you learn to work with Flexbox.
• If you want a group of elements to go together and be aligned as a unit, group them by wrapping them in the same container. E.g., you can center div containers as your usual blocks.