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

【问题标题】：List problem - content aligned vertically but list aligned horizontally?列表问题 - 内容垂直对齐但列表水平对齐？
【发布时间】：2012-06-04 19:47:59
【问题描述】：

我有一个列表，我应用了 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>

任何帮助表示赞赏！

【问题讨论】：

请出示您的 HTML 和 CSS。
你能提供一些html和css代码吗？

标签： html css html-lists css-tables

【解决方案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 的内容。

【讨论】：

当我将 display: table 添加到 <li> 标签时，它起作用了！谢谢:)
通过在li 上设置display:table vertical-align:middle 将不起作用。所以这不是一个解决方案。还有 1 条建议 display:table 和 display:table-cell 在 IE 浏览器低于 IE 8 时不起作用。请参阅参考：quirksmode.org/css/display.html
我还在<div> 中添加了line-height:0 以使垂直对齐在中间正确，因为没有它会稍微偏离。

【解决方案2】：

我要找的是同一个东西，但是上面的项目其他。每个项目都有一个标准的宽度和高度（100px）边距和内边距。

你的意思是垂直对齐它们，如果是这样，请添加一个中断。 :-( 如果你想让它们重叠，图层似乎是唯一的方法

【讨论】：