Vertical align in listed item

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 :rolleyes: . right now my page is showing really bad. how can i have that?

You posted the wrong link. :slight_smile:

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>