html - 列表问题 - 内容垂直对齐但列表水平对齐？

Question

我有一个列表，我应用了 diplay:table-cell 和 vertical-align:middle 样式来垂直居中显示列表项的内容。问题是，列表本身会水平显示!

所以我对各个元素的内容进行了正确的对齐，但对元素本身进行了错误的对齐。

这是我的意思的一个例子:

我要找的是同一件事，但元素在彼此之上。每个元素都有一个设置的宽度和高度(100 像素)以及标准边距和填充。

这是我的 CSS 和 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>

感谢任何帮助!

Answer 1

试试这样的结构:

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

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

离开<li>在它们的默认样式中，因此您将以“列”形式获取它们，然后 div 负责 li 内容的对齐。