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

Question

这可能是一个非常基本的问题，但我想知道垂直对齐这些元素的正确方法是什么，我有这个图像：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是一个简单的

 
textextext
 

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

Answer 1

有些时候不能像我们期望的那样工作，因为我们总是试图在页面上垂直居中内容。这是因为CSS vertical-align属性用于指定两个完全不同的行为，具体取决于它的使用位置。

1. 表格单元格中的vertical-align： 在表格单元格中使用时，vertical-align可以满足大多数人的期望。因此，在大多数情况下（如果可能），解决方案将父显示属性设置为table，table-cell或相关的内容，具体取决于您真正想要的内容。
2. 内联元素的垂直对齐： 但是，当vertical-align应用于内联元素时，它是一个全新的行为。在这种情况下，它的行为类似于（旧的，已弃用的）align属性对元素的影响。
3. 其他情况： 不是真的有效。 在这种情况下，您需要寻找其他解决方案，例如：
   • 将父容器指定为position：relative或position：absolute。
   • 在子容器上指定固定高度。
   • 设置位置：绝对值和顶部：子容器上的50％，将顶部向下移动到父级的中间位置。
   • 设置margin-top：-yy，其中yy是子容器高度的一半，以抵消项目。

Answer 2

如果您不需要支持旧版本的IE，那么我建议您查看＆＃39; flexbox＆＃39;这应该能够满足您的需求：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/