How to Align Content in CSS?

Arrangement of the content appearing on a website is highly significant when it comes to making your website exquisitely pleasing and enhancing its user experience. Content can be an HTML element (inline or block-level), some text, an image, etc. There are various approaches available in CSS to align these types of content on your web page. In this post, we are going to discuss some of these approaches to make the concept of content alignment clear to you.

Let’s Begin

Align Block-level Elements

There is a huge amount of elements that fall under the category of block-level elements such as <p>, <h1> to <h6>, <div>, etc. You can align these elements in different ways. We have discussed some here for you.

How to center Align Text in CSS

You can align text using the CSS text-align property. This property renders different values such as left, right, center, and justify.

Example

Suppose you want to align some text present inside a div container to the right. Follow the code below.

HTML

We placed a <p> element inside a <div> element and assigned a class “right” to the <div> element.

CSS

Using the text-align property we are aligning the text to the right side of the div container.

Output

The text has been aligned to the right using the text-align property.

Align Inline Elements

There comes such time when we need to align inline elements such as images. You can align these types of elements by changing their element type to block level using display property of CSS and then align it various css properties according to the need.

Align an Image

Using various CSS properties such as display, margin-left, or margin-right, you can align an image in whatever style you like.

Example

Suppose you want to center align an image horizontally apart from whether it is in a container or not.

HTML

Here we have inserted an image using the <img> tag.

CSS

To center align an image horizontally, set its display to block, and both margins(left and right) to auto. Moreover, you can provide some width or height of your choice.

Output

The image has been center-aligned successfully.

Horizontal Alignment

Let’s explore different approaches that can be used to align block-level elements horizontally.

How to center align an element

Let’s suppose you have a <div> and you want it to take only a specified amount of space instead of taking up the entire horizontal space and align it in the center of the page. Here is how you do it.

HTML

Here, we have created a <div> element and nested a <p> element in it.

CSS

Now for the div element to take up the specified space only so that it does not stretch out to the corners of its container give it some width. To center align it horizontally, set the margin to auto.

Output

The div has been center-aligned successfully.

How to align elements using position property

In this example, we will align a div container to the right using the absolute value of the position property.

HTML

Here we have created two div containers to understand the working of absolute value of the position property. The class “div” is assigned to the first div tag and the class “green” is assigned to the second div tag.

CSS

Both div containers have been provided some style, however, the position property of second div has been set to absolute. Now the second div will be aligned with respect to the position of the first div.

Output

The “green” div has been absolutely positioned with respect to the the first div using the CSS position property.

How to align elements using the float property.

Suppose you want to float an div container to the right side of the page.

HTML

In the above code, we have created a div container and nested a <p> element in it.

CSS

Using the float property we are floating the entire div and the content inside it to the right.

Output

The div container has been floated to the right successfully.

Vertical Alignment

Here we have explained some ways that you can use to align elements vertically.

How to align elements vertically using padding

Suppose you want vertically center some text present inside a div container.

HTML

Here we have created a div element and nested a <p> element inside it.

CSS

In the above CSS code, we are giving the padding of 80px from the top and bottom and 0px from the left and right 0px to the <p> tag to center align it inside the div.

Output

The text has been center-aligned successfully.

How to align elements using line-height

Using the same example as above we can center align text using the CSS line-height property as well.

CSS

Just set the line-height of the div container to 200px and then set the line-height of <p> element to 1.5.

Output

The HTML elements have been aligned vertically as well as horizontally using line-height.

How to align elements vertically using flexbox

Again we are considering the same example and using flexbox this time to vertically and horizontally align elements.

CSS

Here, we are setting the display of the div container as flex and center aligning the content and items present inside the div container using justify-content and align-items properties provided by the flex-box CSS. Moreover, we are also providing some height and border to it as well.

Output

The text is successfully center-aligned(both vertically and horizontally) using flexbox.

Conclusion

There are various approaches available in CSS to align the HTML elements such as you can vertically as well as horizontally align them to right, or left, or center using position property, float property, padding, line- height, or flexbox, etc. Furthermore you can use these properties to align text and images appearing on your website. We have discussed in detail some different approaches along suitable examples, that come in handy when dealing with alignment of the content on your web pages.