How do you move the copyright symbol up to slightly above the text?

Question: How do you move the copyright symbol up to slightly above the text?

I received the following question from Bryden:

I want the copyright sign to sit where it should do at the 'top' of the letters. I have tried putting the whole thing in a table and using align tags to centralise the letters but that didn't work....


The most common way to write copyright on a Web page is to just type the copyright symbol before the copyright information.

For example:

© 2007 Jennifer Kyrnin

But sometimes, you want the copyright symbol to appear above the line of text. The simplest way to do this is to position it as superscript text. There are two ways to do this with HTML. The easiest is to use the <sup> tag:

<sup>©</sup> 2007 Jennifer Kyrnin

You can also use CSS to align your copyright symbol using the vertical-align property:

<span style="vertical-align:super;">©</span> 2007 Jennifer Kyrnin

You can also raise or lower the copyright symbol to a specific position above the text using the vertical-align property and a percentage. For example:

<span style="vertical-align: 25%;">©</span> 2007 Jennifer Kyrnin

Move Text Elements Below the Baseline

Just like superscript, there are two ways to move text below the line of text and create a subscript. There is an HTML tag <sub> to write subscript text:

Some chemical symbols: H<sub>2</sub>O and CO<sub>2</sub>

Or you can use the vertical-align property to subscript your text:

Some chemical symbols: H<span style="vertical-align:sub;">2</span>O and CO<span style="vertical-align:sub;">2</span>

Or percentages:

Some chemical symbols: H<span style="vertical-align:-25%;">2</span>O and CO<span style="vertical-align:-25%;">2</span>