Question

I have a list to which I’ve applied diplay:table-cell and vertical-align:middle styles to display the list items’ contents centered vertically. Trouble is, the list itself then displays horizontally!

So I have the correct alignment on the individual items’ content, but the wrong alignment on the items themselves.

Here’s an example of what I mean:

What I’m looking for is the same thing, but the items on top of one another. Each item has a set width and height (100px) with standard margins and padding.

Here’s my CSS and HTML:

ul#affiliations-list {
list-style: none;
margin: 10px 0 0 0;
padding: 0 0 0 12px;
display: table;
width: 96px
}
ul#affiliations-list li{
margin: 0;
padding: 0;
width: 94px;
height: 94px;
background: #fff;
border: 1px solid #020336;
margin-bottom: 10px;
display:table-cell; 
vertical-align:middle;
position: relative

}

<ul id="affiliations-list">
            <li><img src="be39fb67466b1a11b4989713b51a268c.jpg" width="94" height="33" alt="" /></li>
            <li><img src="297b46e52846790f9bdb71bb0c54158f.png" width="94" height="29" alt="" /></li>
            <li><img src="d20e8a119dd54a7c73d058cd333dbd71.jpg" width="93" height="94" alt="" /></li>
            <li><img src="beb10861fed07a849e36d98922304751.gif" width="94" height="68" alt="" /></li>
</ul>

Any help appreciated!

Answer 1

Try a structure like this:

<ul>
    <li><div>correctly aligned</div></li>
    <li><div>correctly aligned</div></li>
    ...
</ul>

<style>
    div { display: table-cell; vertical-align: middle; }
</style>

Leave the <li> at their default styling, so you’ll get them in “column” form, and then the div takes care of the alignment of the li’s content.