Image and text position in list inline elements - html

Question

I am trying to design a web-page where I have a list of bands, and every image will be a small set picture of the band logo(or something). I am setting the style inline and I have tried vertical-align and line-height etc and nothing seems to work.
I am pretty sure I could accomplish this with tables but I have been told many times that is not the proper use of the table.
<div id ="Content">
<ul>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
<li><img src="IMG_3117.jpg"width="100" height="100"/>band name</li>
</ul>
</div>
Here is the small amount of CSS I have
#content li{display:inline;}
img {
max-height:100px;
max-width: 100px;
}
#content ul{list-style-type: none;
clear:left;
}
Any help or tips would be greatly appreciated

Answer 1

If I understood what you're trying to do, try this:
#content li {
display: inline-block;
background-color: #eaeaea;
border: 1px solid red;
text-align: center;
max-width: 100px;
white-space: nowrap;
overflow: hidden;
margin: 5px;
}
img {
max-height:100px;
max-width: 100px;
display: block;
}
#content ul{
list-style-type: none;
clear:left;
}​
Have a look at it here: http://jsfiddle.net/zDhKQ/

Answer 2

My best guess is that you are looking for this:
#content ul li {
float:left;
}
otherwise you'd have to be a bit more specific on what you are trying to accomplish.

Answer 3

I believe you want the align tag. Something like this:
<li><img src="IMG_3117.jpg" alt="Smiley face" width="42" height="42" align="left">This is some text.
</li>
Will result in something that looks nice.