Forum Moderators: not2easy
<ul>
<li><a href="#"><img src="i.gif"></a></li>
<li><a href="#">Example</a></li>
</ul>
Here's my CSS:
ul { style: none; margin: 0; }
li { display: inline; }
The problem I'm having is that I want the image in the first link and the text in the second link to both be vertically aligned on the "middle" of each. Like so:
+- ul --------------------------------+
¦ +- li ------------+ +- li --------+ ¦
¦ ¦ +- a ---------+ ¦ ¦.............¦ ¦
¦ ¦ ¦ +- img ---+ ¦ ¦ ¦.............¦ ¦
¦ ¦ ¦ ¦,,,,,,,,,¦ ¦ ¦ ¦ +- a -----+ ¦ ¦
¦*¦*¦*¦,,,,,,,,,¦*¦*¦*¦*¦ Example ¦*¦*¦** (Middle)
¦ ¦ ¦ ¦,,,,,,,,,¦ ¦ ¦ ¦ +---------+ ¦ ¦
¦ ¦ ¦ +---------+ ¦ ¦ ¦.............¦ ¦
¦ ¦ +-------------+ ¦ ¦.............¦ ¦
¦ +-----------------+ +-------------+ ¦
+-------------------------------------+
It looks, though, like the image sticks up out of the containing <a>'s line height. Does anyone know how to style this to achieve the layout above?
Thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul { list-style: none; margin: 0; }
li {float:left;display:block;border:1px solid #333; }
/*li.textvalign {margin-top:124px;background:#ccc; }*/
/*OR MAYBE*/
li.textvalign {padding:124px 0;background:#ccc; }
</style>
</head>
<body>
<ul>
<li><a href="#"><img src="img.jpg" width="345" height="258"></a></li>
<li class="textvalign"><a href="#">Example</a></li>
</ul>
</body>
</html>
There is also display:table but thats not supported by the worlds favorite browser.
ps gold star for the example ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0;}
ul { list-style: none; margin: 0; }
li {float:left;overflow:hidden; padding:1px;}
a {
display:block;
border:10px solid green;
background:#ccc;
font-size:16px;
}
a.textvalign {
/*fullheight = (image height) + (border height) --> 280 + 10 = 290px */
/*padding-top = (fullheight/2) - fontsize --> 145 - 16 = 129 */
padding-top:129px;
/*height = image height - padding-top - (border height*2) ---> 280 - 129 - 20 = 151 */
height:151px;
}
img {border:0;}
</style>
</head>
<body>
<ul>
<li> <a href="#"><img src="graphics/190b.jpg" width="190" height="280" align="absmiddle"></a> </li>
<li><a class="textvalign" href="#">Example</a></li>
</ul>
</body>
</html>
In IE6 the example <li> will auto fill to the right of the window. Not a clue why.
*edit bad maffs corrected (possibly)
