How to align content horizontally with CSS? I believe it is one of those questions that every web developer asks himself or herself at least once in the career. Though, in my experience, this question pops out all the time and excites the minds of both newbies and seasoned artists.

To make matters worse, there is no one-size-fits-all answer. The deal is that different elements of the layout require different approaches to them. While one solution may work for certain objects, it fails to affect the others. Therefore, aligning content horizontally is one of the basic skills that everyone should acquire. And we are going to teach you that with our comprehensive guide of how to align content horizontally with CSS.

Guide: How to align content horizontally with CSS

As we have already said, the answer to this question depends on the object, or to be more precise its display value. Therefore based on the type of content, we have divided our guide into several parts: text, image, and block – three popular elements of HTML.

How to Align Text Horizontally with CSS

Aligning text horizontally is perhaps one of the easiest things. As a rule, there is no problem with that since the basic CSS rule for aligning works like a charm. All you need to do is to use “text-align” property that comes with 7 options:

  • left,
  • right,
  • center,
  • justify,
  • inherit,
  • start,
  • end.

While the first five are self-explanatory, the last two require some clarification.

These values were added for multiple language support. They align text to the start or end edge of the line box. In other words, the start is “left” in LTR or right in RTL, whereas the end is “right” in LTR or “left” in RTL.

Okay, back to coding, the typical examples of aligning text are

.outer{
text-align: left;
}
.outer{
text-align: center;
}
.outer{
text-align: right;
}

Note the property affects only the inline content inside blocks.

How to Align Image Horizontally with CSS

Aligning an image horizontally is not as easy as text. The catch is that it is widely believed to be a block element; however, in fact, it is an inline element that has properties of a block element such as width and height. Therefore, the solution depends on the display value. There are two main tactics:

  • Regard image as an inline element;
  • Regard image as a block-level element.

Depending on that, you should use either text-align, float, or margin properties.

Align Image Horizontally Using Text-Align Property

To use the text-align property to position the image in the flow, we need to ensure that the image element has a display value set to inline-block or inline. By default, it is inline, even though browsers treat them like inline-block. Therefore, if you have not changed this value somewhere earlier, you should not set it.

The CSS code for aligning the image to the left in this situation looks like this:

.img-container {
	text-align: left;
}

Align image to the right side:

.img-container {
	text-align: right;
}

Center an image:

.img-container {
	text-align: center;
}

Align Image Horizontally Using Float Property

If the previous solution does not work for you, you may try float property that is generally used for situations when you need to wrap text around the image.

.img-container{
    float: left;
    clear: left;
}

/* Alternatively for right-sided objects*/
.img-container{
    float: right;
    clear: right;
}

The drawback is that you can’t center the image with it.

Center Image Horizontally Using Margin Property

To center the image inside the block, you may take advantage of its dual nature and sort out the issue from the block-level point of view.

For this, you need to set the display value to the block and use margins. The CSS code should look like this

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

How to Align Div Block Horizontally with CSS

Aligning, especially centering, block inside a block can be a real nightmare. However, there are time-tested tactics.

Align Div Block to the Left or Right Side with Float

Alignment to left or right side is realized with the help of float property.

.inner-div {
float: left;
}

/* Alternatively for right-sided objects*/
.inner-div  {
float: right;
}

If you need to cover the audience from IE6 & IE7, then you should use margins like this:

.inner-div{
margin-right: auto; 
margin-left: 0;
}

/* Alternatively for right-sided objects*/
.inner-div{
margin-left: auto; 
margin-right: 0;
} 

Heck, you may even consider block as an inline-block level element in order to apply text-align property to it like this:

.outer-div{
text-align: left;
}
.inner-div{
display: inline;
}

However, note that both parent and child should have either inline or inline-block display value in order this hack to work.

Center Div Block within Block with CSS

There are two main tactics.

First, let’s consider block as an element with display value set to block, that is a situation by default. In this case, you should use margins.

.inner {
  display: block;
  margin: 0 auto;
}

If you need a cross-browser answer that targets IE8+ then you should apply these styles to the block:

.inner {
  display: table;
  margin: 0 auto;
}

Secondly, you may regard block as an inline-block element. In this case, you should use text-align property like this

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  display: inline-block;
}

Last but not least, Flexbox

Although at the beginning of the guide, I said that there is no one-size-fits-all answer, there is a light at the end of the tunnel after all. And this light is the Flexbox.

Flexbox is a real lifesaver that solves all the problems with positioning these days. Whether you want to center an image or right align a block inside another block, it will easily do this.

The basic routine boils down to two simple steps. First, define the parent block as a flex container. After that, set properties for the children, or if you want to align just one child, set specific style for it.

Align Block to the Left Using Flexbox

If there is one child inside or children that should be positioned to the left side as a group, you should do this:

.container {
  display: flex; 
  flex-direction: row;
  align-content: flex-start;
}

If you need to align one of the children to the left side

.container {
  display: flex; 
  flex-direction: row;
}
.item {
  align-self: flex-start;
}

Align Block to the Right Using Flexbox

If all children should be positioned to the right:

.container {
  display: flex; 
  flex-direction: row;
  align-content: flex-end;
}

If you need to align one of the children to the right side:

.container {
  display: flex; 
  flex-direction: row;
}
.item {
  align-self: flex-end;
}

Сenter Block inside Block with Flexbox

If all children should be centered:

.container {
  display: flex;
  flex-direction: row; 
  align-content: center;
}

If only one child should be centered:

.container {
  display: flex; 
  flex-direction: row;
}
.item {
  align-self:center;
}

As you can see, Flexbox does all the heavy lifting, leaving you with a clean, intuitive code.

The only drawback is that according to CanIUse, there are still bugs with IE11 and its lower versions and Android Browser that supports only the old version of Flexbox. However, their global usages are increasingly small.

Conclusion

There are different ways to align content horizontally using CSS. Of course, it is much easier to go for new solutions like Flexbox. However, if you intend to create an interface that works consistently even in the oldest and outdated browsers, then it is recommended to put in action old-school tricks.

So, tell us which tricks do you prefer to use? Do you like Flexbox? Or, you stick to traditional routes?