Step 10 – Center

Last update: February 15 2019

With HTML you can center text, an image or other parts of your design. It’s very simple. Nevertheless, I’d like to point out that the <CENTER>-tag got phased out in HTML5, forcing you to use CSS. The tag is still supported by browsers though.

Center Content

To center everything in the index.html, this is all you need to add:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<center>
<font face="Arial">
<H2>A short introduction</H2>
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i> and, now,
with her second company,
<i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</center>

</body>
</html>

As you can see, I open the CENTER-tag before my first line of text and close it after the HR-tag. Anything in between <CENTER> and </CENTER> is now centered. I could’ve also placed the first CENTER-tag after the FONT-tag. You can even open the CENTER-tag before the H2-tag and end it right after the HR-tag. You’re free to decide where you want it.

To center a selection only, the code would look like this:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center><H2>A short introduction</H2></center>
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i> and, now,
with her second company,
<i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<center><p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2"></center>
</body>
</html>

With the above code I’ve centered the headline, the last paragraph and the horizontal rule.

Go to Step 11

Bookmark the permalink.

Comments are closed.