Forum Moderators: open
Let me start off by saying I have absolutely no control over the generated HTML. All I can do is apply CSS styles to the page. The HTML must remain the way it is shown below but I have full control on the Style Sheets.
All I want to do is vertically center the text with the images, like this;
img img img
img img img
img img img txt txt txt txt
img img img
img img img
I need to do this to all 4 list items which all use the same classes. (so I can't just add different margins to the individual items)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body><style>
#navigation ol{
list-style:none;
padding:0;
margin:0;
}
#navigation ol li{
width:150px;
display:block;
float:left;
}
#navigation ol li img{
width:30px;
height:50px;
float:left;
}
#navigation ol li span{
display:block;
}
</style><div id="navigation">
<ol>
<li>
<a href="#">
<img src="1.png"/>
<span>Lorem ipsum</span>
</a>
</li>
<li>
<a href="#">
<img src="2.png"/>
<span>Lorem ipsum dolor sit amet</span>
</a>
</li>
<li>
<a href="#">
<img src="3.png"/>
<span>Lorem </span>
</a>
</li>
<li>
<a href="#">
<img src="4.png"/>
<span>Quisque semper, quam non ultricies viverra, justo nulla porttitor leo</span>
</a>
</li>
</ol>
</div></body>
</html>
If someone could point me in the right direction I would be extremely grateful. Thanks in advance!
img img img
img img img
img img img txt txt txt txt txt txt txt
img img img
img img img
txt txt txt txt txt txt txt
Doesn't help me.
img img img
img img img
img img img txt txt txt
img img img txt txt txt
img img img txt txt txt
I need the text to be centered so that doesn't work.
Why is this so damned hard?
img {vertical-align:middle;}
As I mentioned above, this is the result which is just not acceptable;
img img img
img img img
img img img txt txt txt txt txt txt txt
img img img
img img img
txt txt txt txt txt txt txt
I haven't been able to find something that works in the same fasion for IE. Any ideas?
Can't win'em all I guess.
