I read forums telling that listed item isn’t a block level element so vertical-align won’t work. i got this page and logos are of different sizes and height and i want to make them middle so the page is equal on both side (top and bottom) like in td we had vertical align, i think . right now my page is showing really bad. how can i have that?
You posted the wrong link.
oops, sorry. now its correct one
I don’t understand how you want them to look.
i want them equal spaced, like equal empty space on top and bottom, if image is 100px in height,next to a image which has 200px height.
See if this gets you started. IE8+
<!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">
<meta http-equiv="content-language" content="en-us">
<meta name="viewport" content="width=device-width">
<title>middled logos</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1164222-vertical-align-in-listed-item
Thread: vertical align in listed item
2013.08.15 06:07
nofel
-->
<style type="text/css">
.listsoflogos {
display:table;
table-layout:fixed;
margin:0 auto;
}
ul {
list-style:none;
display:table;
table-layout:fixed;
border-spacing:6px;
padding:0;
}
li {
display:table-cell;
vertical-align:middle;
text-align:center;
}
</style>
</head>
<body>
<div class="listsoflogos">
<h3>Title of these logos</h3>
<ul>
<li><img src="http:placehold.it/100x80" alt="dummy logo"></li>
<li><img src="http:placehold.it/120x50" alt="dummy logo"></li>
<li><img src="http:placehold.it/160x60" alt="dummy logo"></li>
<li><img src="http:placehold.it/180x40" alt="dummy logo"></li>
</ul>
<h3>Title of these logos</h3>
<ul>
<li><img src="http:placehold.it/120x50" alt="dummy logo"></li>
<li><img src="http:placehold.it/160x60" alt="dummy logo"></li>
<li><img src="http:placehold.it/180x40" alt="dummy logo"></li>
<li><img src="http:placehold.it/100x80" alt="dummy logo"></li>
<li><img src="http:placehold.it/60x60" alt="dummy logo"></li>
</ul>
</div>
</body>
</html>