在行内块定义的宽度设置中对齐 li 元素答案

【问题标题】：Aligning a li element in an Inline-block defined Width set up在行内块定义的宽度设置中对齐 li 元素
【发布时间】：2015-03-20 07:44:48
【问题描述】：

这可能是一个非常基本的问题，但我想知道垂直对齐这些元素的正确方法是什么，我有这张图片：http://s22.postimg.org/luh1ory8x/ul_li_vertical_align.png

这以更直观的方式解释了我的问题，CSS 最终设置是这样的：

.ulclass li { display: inline-block; width: 130px; height: 40px; text-align: center; padding: 5px; vertical-align: middle;  }

HTML 很简单

文本文本

设置，使用不同长度的文本，这就是为什么它们分成更多行而其他只有单行文本等。

【问题讨论】：

【解决方案1】：

有时不能像我们预期的那样工作，因为我们总是尝试将页面上的内容垂直居中。这是因为 CSS 垂直对齐属性用于指定两种完全不同的行为，具体取决于使用它的位置。

表格单元格中的垂直对齐：在表格单元格中使用时，vertical-align 可以满足大多数人的期望。因此，在大多数情况下（如果可能），解决方案是将父显示属性设置为表格、表格单元格或其他相关内容，具体取决于您真正想要的内容。
对内联元素进行垂直对齐：然而，当垂直对齐应用于内联元素时，它是一种全新的行为。在这种情况下，它的行为就像（旧的、已弃用的）align 属性对元素所做的那样。
其他情况：真的不行。在这种情况下，您需要寻找其他解决方案，例如：
- 将父容器指定为 position:relative 或 position:absolute。
- 在子容器上指定一个固定高度。
- 在子容器上设置 position:absolute 和 top:50% 以将顶部向下移动到父容器的中间。
- 设置 margin-top:-yy ，其中 yy 是子容器高度的一半，以向上偏移项目。

【讨论】：

【解决方案2】：

如果您不需要支持旧版本的 IE，那么我建议您研究一下“flexbox”，这应该可以满足您的需求：

【讨论】：

是的，不幸的是我需要 IE 支持，至少从 IE8 开始。
OK 计划 B，您是否尝试过将文本放在跨度内，然后在父级上设置 'display:table'？这样你就可以在 span 上使用垂直对齐，并使用你想要的背景颜色来设置 span 的样式。
像这样：
- text
我已经做了一些调整，比如将类添加到特定的 li（单行的），但我想知道对齐这些的“合法”方式。
Display: table 是完全合法的，使用实际的表格是不好的做法，但是设置一些东西来 display:table 很好。您尝试做的事情实际上并不常见（通常文本是垂直对齐的，但框的高度相同），并且通常在这些情况下，非正统的要求需要非正统的解决方案。 :)