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

Question

我有一个列表，我已经应用了diplay：table-cell和vertical-align：middle样式来显示列表项的内容垂直居中。麻烦的是，列表本身会水平显示！

所以我对各个项目的内容有正确的对齐方式，但项目本身的对齐方式不正确。

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

我正在寻找的是同样的东西，但是彼此重叠的物品。每个项目都有一个设置的宽度和高度（100px），带有标准边距和填充。

这是我的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内容的对齐。

Answer 2

  

我正在寻找的是同样的东西，但是一个上面的物品   另一个。每个项目都有标准的设置宽度和高度（100px）   边距和填充。

你的意思是垂直对齐它们，如果是这样的话，请加上休息。 :-( 如果你想让它们重叠，层似乎是唯一的出路