Image Alignment

Centered Headings

You may sometimes want a centered heading on your page with an image sitting to the left of the heading. You can use a <center> or <div> tag to do this, but the heading text gets centered in the area that remains beside the image as the following example shows.

The Government of England The Government of England The government of England was a limited mockery. Henry VIII found walking difficult because he had an abbess on his knee.

<div align="center">
  The Government <br /> of England
</div>

<br />

<div align="center">
  <img ... align="left" />
  The Government <br /> of England
</div>

<p>
  The government of England was a limited mockery.
</p>

<p>
  Henry VIII found walking difficult because he had an abbess on his knee.
</p>

As you can see, when the image was added the text was shifted to the right to center it within the remaining space. What if you'd like to keep the text centered on the page? You can add an image with the same width on the right side. If you don't want a visible image there, you can use a transparent gif to do the job. Here are some examples:

"Virgin Queen" "Virgin Queen" "Virgin Queen" "Virgin Queen" Queen Elizabeth was the "Virgin Queen." As a queen she was a success. When Elizabeth exposed herself before her troops, they all shouted "Hurrah." Then her navy went out and defeated the Spanish Armadillo.

<div align="center">
  "Virgin Queen"
</div>

<br />

<div align="center">
  <img ... align="left" />
  "Virgin Queen"
</div>

<br />

<div align="center">
  <img ... align="right" />
  <img ... align="left" />
  "Virgin Queen"
</div>

<br />

<div align="center">
  <img ... align="right" /> <!-- Transparent -->
  <img ... align="left" />
  "Virgin Queen"
</div>

<p>
  Queen Elizabeth was the "Virgin Queen."
  As a queen she was a success.
</p>

<p>
  When Elizabeth exposed herself before her
  troops, they all shouted "Hurrah." Then
  her navy went out and defeated the Spanish
  Armadillo.
</p>

If you need a transparent gif, you can right-click anywhere inside the box in this next example and save it. This example is similar to the previous one except that the visible image is on the right and the transparent one is on the left under the box.

"Wm. Shakespear" The greatest writer of the Renaissance was William Shakespear. Shakespear never made much money and is famous because of his plays. He lived in Windsor with his merry wives, writing tragedies, comedies, and errors. In one of Shakespear's famous plays, Hamlet rations out his situation by relieving himself in a long soliloquy. In another, Lady Macbeth tries to convince McBeth of a heroic couplet. Writing at the same time as Shakespear was Miguel Cervantes. He wrote Donkey Hole.