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.
Here is the present list of the codes in this article:
- Centering navigation menu with <nav> tag
- Centering navigation menu using 'nav' as a class
- Centering image as a block
- Centering 2 or more images side by side
- Centering 2 or more buttons side by side
- Centering content (texts) vertically with same padding
- Centering content (texts) vertically with line-height
- Centering content vertically & horizontally with 'display table'
- Using flexbox to centering content horizontally & vertically
1. Centering navigation menu with <nav> tag
Let’s begin simple with centering navigation menu with the
<nav> element or tag.
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
display: inline does is, force the list elements in one line.
However, it -
- does NOT allow width and height on an element, and also
- 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.
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.
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.
4. Centering 2 or more images side by side
Let's take the third example forward.
Let's do this (for simplicity let the images have same dimensions).