Kibbles and Bits. Mmm.

The sentence above is aligned with the center of the image vertically. To make this happen we need to make a small change to our CSS file and to our image tag and also pay some attention to how much space we have to play with.

The CSS

Let's make a class in our CSS file called "middle"...

img.middle {

    vertical-align:middle;

    margin: 5px;

} 

The image tag

For the image we want centered we have to add the class "center"...

CSS code:

<img src="images/yourimagefile.jpg" class="middle" />

That's it! You are done. (methods are described in detail below)

---

Techniques described

if you weren't sure what to do...

Here is a more detailed description of the above methods. We will explain everything.

Using CSS for aligning text to the center of an image.

A CSS file contains instructions that your web pages use to display items in particular ways. In order to use CSS techniques, we must change both the CSS file and the HTML document.

First you must update your CSS file and add the following code...

img.middle {

    vertical-align:middle;

    margin: 5px;

} 

In CSS this is called creating a "class". It is an instruction of how to display your image whenever that class is called. The name of this particular class is "middle".

Once you have added this to your CSS file, you must tell the image what instructions to use. To do this, go to the image tag of the image you want to center and change it so that it knows what instructions to follow...

<img src="images/yourimagefile.jpg" class="middle" />

In the above code you can see that we added a "class" and that it's name is "middle". Now the image knows where to find instructions.

Once the CSS file and the HTML image tag is updated, the text next to the image will be aligned to the center of that image.