Aligning an Image within a List

[Struggling]

I am trying to get it so that my image in the following example appears in the middle of the list rather than at the top but am not sure how to do this.

CSS

.ulhistory { 
list-style: none; 
margin: 0px 0px 30px 0px; 
padding: 0px; 
overflow: hidden;
width: 450px; 
text-align: left;
font: 12px "Arial", Helvetica, Sans-serif;
line-height: 20px;
} 

.ulhistory li.left
{
float: left;
width: 250px;
margin: 0px; 
padding: 0px;
}

.ulhistory li 
{
float: left;
width: 200px;
margin: auto; 
padding:  0px;
}

img.history {margin: 0px; padding: 0px;}

HTML

<ul class="ulhistory">
<li class="left"><span class="historydate">1898 - 1910</span><br /> Text will appear in here </li>
<li><img class="history" src="images/history/history1.jpg" alt=" " /></li>
</ul>

<ul class="ulhistory">
<li class="left"><span class="historydate">1910 - 1930</span><br />Text will appear in here.</li>
<li><img class="history" src="images/history/history2.jpg" alt=" " /></li>
</ul>

Cheers for any help

[AutisticCuckoo]

Not sure what you're asking, but to vertically centre the image within its list item, try

img.history {vertical-align:middle; margin: 0px; padding: 0px}

[Struggling]

No that hasn't worked I had tries that as well.

What I am after is a list where on the left i have some text and on the right an image that goes with that text. The text on the left can be a few lines long or 5 lines long so I thought it would look better if the image was aligned in the middle of the list regardless of the text size. At the moment its aligned at the top

Hopefully this is a bit more clear.

[AutisticCuckoo]

Wouldn't it then be far better to use one list item instead of two, and put the image as a background image to that list item?

As it is, you're using an entire list item for something purely presentational, which is semantically dubious.

[Struggling]

Sorry no thats not what i want.

I want it so that on the left side it describes a photo and then on the right side it shows the photo and the photo is exactly in the middle of the text regardless of how long the text is.

Aligning images in CSS seems to be a bit of a tricky subject in certain examples from my googleing

[Paul O'B]

I want it so that on the left side it describes a photo and then on the right side it shows the photo and the photo is exactly in the middle of the text regardless of how long the text is.

If the image isn't going to be turned into a link (and isn't important content) then you could put the photo in the background of the list at the right center position and it will always be centered with the list text no matter how high the text is. (As you are describing the photo then I think its safe to say that it will be ok as a background image.)

Of course you will have to use some padding-right to create space for the image and I am also assuming that images are roughly the same width.

If the image is important content then it would be easier to align it to the top. The image could be in the same list item and just floated right.

There are ways to vertically align block level elements but they are more complicated than they need to be. You may be better of using a 2 cell table which will do the job quite easily.