Get the Codes for Centering Content with CSS, Make a Difference

Centering content

Centering content is often a pain for web developers. The reason perhaps is that there are different ways to go about, leading to confusion as to which one to use when.

Then again, depending on the situation, you may need to go for centering content either or both horizontally and vertically. This can add to confusion even more.

In this article, I’ve collected some codes that will help you in this ‘onerous’ task of using HTML and CSS for centering content in your page copy.

As a DIY content developer, I too fumble with centering content often, so the codes here would be as much helpful for me as they would (hopefully) be for you.

The codes are mostly ready-to-use, so go ahead, test them in your page copy today. If you’re a subscriber, you’ve access to all the codes for centering content, plus you can send comments to seek assistance if you need.

Here is the present list of the codes in this article:

  1. Centering navigation menu with <nav> tag
  2. Centering navigation menu using 'nav' as a class
  3. Centering image as a block
  4. Centering 2 or more images side by side
  5. Centering 2 or more buttons side by side
  6. Centering content (texts) vertically with same padding
  7. Centering content (texts) vertically with line-height
  8. Centering content vertically & horizontally with 'display table'
  9. Using flexbox to centering content horizontally & vertically

Important: I wish to add more codes for centering content in the future, so in a way it’ll be like a cornerstone article for the subscribers.

Let’s start.

1. Centering navigation menu with <nav> tag

Let’s begin simple with centering navigation menu with the <nav> element or tag.

In this example, we’ll use the <nav> tag since it defines a set of navigation links. Usually, the navigation links will arrange horizontally as you normally see in any website.

In the CSS code below, the <nav> is instructed for aligning in the center. You might want to align the navigation links to the left or right. Figure out how to do that.

You can use the <menu> element instead of <nav> for the same result, however as pointed out here, <menu> is to be used for a list of commands and is an interactive element and more likely to be used exclusively in Web Applications.

2. Centering navigation menu using 'nav' as a class

If you're not using the <nav> element, you can do a workaround by using a CSS class which I'll name here as 'nav'. The trick here is the use of the value inline-block for the display property for the element a.

What display: inline does is, force the list elements in one line.

However, it -

  1. does NOT allow width and height on an element, and also
  2. does NOT respect the top and bottom margin and padding.

Fortunately, both of these are possible with display: inline-block. But there is more you can do with it.

Unlike display: block, the advantage is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

Have a look at the example above.

3. Centering image as a block

How often have you faltered centering an image?

If you insert an image in WordPress posts or pages, there is this default WordPress style, class="aligncenter", that renders it exactly in the center of the container horizontally.

But there could be instances when you've to devise ways to center an image, and it's a bit difficult, if you ask me.

You might use text-align: center, but mind you this is for centering block-level element, and image is usually an inline element, so it may not work all the time.

The solution is to display the image as a block, and then centering it by setting the left and right margins to auto. Look at the simple codes below.

Next, we'll center 2 or more images alongside one another.

4. Centering 2 or more images side by side

Let's take the third example forward.

Suppose you've 2 or more images and you want to place them in the center horizontally with equal margins from one another.

Let's do this (for simplicity let the images have same dimensions).

Read the full post as a subscriber and enjoy these benefits!

  • All the supercool content creation hacks
  • Ready-to-use templates for video, animation, etc.
  • Quick tips to drive your business
  • Mini courses to help you succeed
  • Priority assistance for specific needs, and more..

Scroll to top