The good old <center> tag was a simple enough concept; whatever was placed inside these element tags appeared in the centre of its container. But this HTML element was deprecated in HTML4 and XHTML 1 and is therefore not supported in HTML5.

Removing the use of <center> was a move away from HTML control which increasingly favours CSS for content handling. The text-align property would seem to be left with sole responsibility for centering block elements and can be placed in any element such as a <div> or <p> including self-closing elements like <img>.

Although <center> is no longer supported, most browsers will faithfully render it so you can confidently continue to use it. But although browsers are built with the widest backward compatibility, it is web software development that aims for the latest standards, so pretty soon you will run into problems using deprecated elements.

Let’s take for an example the Divi builder which takes exception to non-standard HTML. When it exports a layout in the json format, the non-standard elements are stripped. So <center> tags will not make it to the json export file.

As you may expect from a programming language, there are always good reasons when changes are made. The seemingly senseless removal of the <center> element is down to the modern way of separating the structure of HTML from the styles of CSS.

CSS – The text-align property

When centering text, the text-align property is all that’s required. It’s used only to align left or right and to center and justify text. It applies only to horizontal alignment within its container and not necessarily within the full page.

p {text-align: center;}

When things do not turn out as expected the main issue is that text-align has been used with an inline element like a <span>. Text in a <span> can be wrapped in a <div> to rectify the problem.

e.g. - <div style="text-align: center;"><span>This text line is at center</span<div>

Centering images

When working with a Divi image module, the option to center the image usually works fine, until you apply a second feature such as adding a border. In this eventuality the image is prevented from centering and defaults to position left. A browser will oblige unless another property is queuing, in which case the browser will drop the non-standard tag in favour of the other and in this example the non-standard tag is <center>.

The way to force centering is to use the Custom CSS tab and insert the property margin: 0 auto; in the Main Element box. The margin property works with all block level elements. You cannot simply place the word ‘auto’ in the image module’s margin settings and so using custom CSS is the only solution.

Placing an image using HTML in a text module is slightly more problematic. Consider the following contents of a text module:

<div style="border: 1px solid grey; padding: 10px;">
<h4>Eagles</h4>

<p>Like all birds of prey, eagles have very large, hooked beaks for ripping flesh from their prey, strong, muscular legs, and powerful talons. The beak is typically heavier than that of most other birds of prey.</p>

<src="http://www.webpapa/wp-content/uploads/eagle.jpg">

<p>With the exception of some vultures, eagles are generally larger than other birds of prey. They have strong muscular legs, powerful talons and large hooked beaks that enable them to rip the flesh from their prey.</p>
</div>

Eagles

Like all birds of prey, eagles have very large, hooked beaks for ripping flesh from their prey, strong, muscular legs, and powerful talons. The beak is typically heavier than that of most other birds of prey.

With the exception of some vultures, eagles are generally larger than other birds of prey. They have strong muscular legs, powerful talons and large hooked beaks that enable them to rip the flesh from their prey.

Of course the best way to deal with this situation would be to use two text modules and an image module.

But how is it done with CSS. Using inline CSS such as <text-align: center;> and <margin: 0 auto;> will not work, so the image is wrapped in a block level container such as a <div;> as shown here:

<div style="text-align: center;">
<img src="http://www.webpapa.co.uk/wp-content/uploads/eagle.jpg">
</div>

Eagles

Like all birds of prey, eagles have very large, hooked beaks for ripping flesh from their prey, strong, muscular legs, and powerful talons. The beak is typically heavier than that of most other birds of prey.

With the exception of some vultures, eagles are generally larger than other birds of prey. They have strong muscular legs, powerful talons and large hooked beaks that enable them to rip the flesh from their prey.

Again we have been tempted into using inline styles to handle positioning which is something we should be using less often. A better way is to make a class that will apply to any image that contains this particular class name, such as:

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

Now the HTML for our image needn’t be wrapped in a block level element but simply horizontally centered using the class ‘center’ like this:

<img src="http:www.webpapa.co.uk/wp-content/uploads/eagle.jpg" class="center">

Understanding the behaviour of block and inline elements will go a long way in understanding how to write code that is efficient and maintainable and doesn’t rely on the overuse of floats or other methods like attaching !important to every statement. Positioning things becomes easier when you understand how the browser lays things out.

Pause for a moment and collect your thoughts

Block Level Elements

Let’s briefly go over the relationship of block level elements and alignment. Elements are usually defined as either block-level or inline and for some situations there is an inline-block variant that allows the setting of padding, margin and other things that benefit only inline elements.

The way to get your head around it is to understand that block-level occupies the entire space of the parent container. Translated to browser speak, this means block-level elements are displayed with a new line both before and after the block. When using the margin: auto 0; property – ‘auto’ is referencing the top and bottom margins, they are not left and right margin settings.

A block element can be put inside another block element. An inline element can sit inside a block element and any other inline element. But a block element cannot reside inside an inline element. There are some situations where an element tag will wrap around a mixture of block and inline elements such as an anchor link <a> around content.

Elements have a default block-level status, so the following tags are block-level:
<div> <p> <h1> <ul> <li> and the following are inline elements <span> <a> <img> <em> <code>.

The inline block does not take the whole line but only the space necessary to display the content within its tags. In the example above, we wrapped an <img> element with a <div> because it is a self-closing element. Elements that have a closing tag, can take the inline CSS directly, if you first assign them a display property of block; so text within <span> tags would look like this:

<span style="display: block; text-align: center;">Is this text aligned</span>

Let’s take a look at a second example: Two headings are required one on top of the other with a background colour behind the text only not the whole line. A block element will automatically stretch to fill the page even with no width assigned so the problem here is that h1 is a block element.

The code might look like this:

<h1 style="background: yellow;">This is heading1</h1>
<h1 style="background: yellow;">This is heading2</h1>

Each h1 takes the line and displays one under the other as follows:

To control the background we will assign the property display: inline-block to each h1 element:

The result above has placed the inline headers side by side but we want them to appear one above the other. We could use a horizontal rule <hr> or a break <br> between the two headers which would work:


<h1 style="display: inline-block; background: yellow;"h1>This is heading1</h1><br>
<h1 style="display: inline-block; background: yellow;"h1>This is heading2</h1>

and the result is:

But the neater option would be to wrap the headers in a <div> tags like this:

<div style="display: inline-block; background: yellow;">
<h1>This is heading1</h1>
<h1>This is heading2</h1>
</div>

CSS – The vertical-align property

Almost everyone working with CSS at some point has put their hands up in the air because vertical alignment is a mystery and why hasn’t it been sorted out by the W3C organisation. Block level elements ignore the vertical-align property whereas inline elements are subject to it. Suddenly it dawns on you why you have had so much hair pulling over vertical alignment.

A similar approach can be taken in making a class for use with an image element:

.vcenter {
	vertical-align: middle;
}

CSS – Flexbox

With Flexbox anything can be vertically and horizontally aligned using align-items, align-self, and justify-content properties.

To center vertically and horizontally with flexbox you need to use two properties:

.parent {
	display: flex;
	justify-content: center;
	align-items: center;
}

<div style="display: flex; justify-content: center; align-items: center;">Text Content</div>