css - 错位取决于文本

Question

我正在尝试让水平 li 元素创建这些卡片效果。

但是，它们内部的文本量似乎使它们的对齐方式偏离了（有些高于其他）。例如，第 3 个框的文本比其他 2 个要多，因此它的位置高于其他框。

li {
  position: relative;
  display: inline-block;
  width: 282px;
  height: 368px;
  background: url("../img/comedians/comedian-card.png");
  padding: 20px;
  margin: 10px;
}

无论里面的文字如何，我怎样才能让它们对齐？

http://f.cl.ly/items/2e2I2Z0x0g3M2D1o2F0t/stackoverflow.png

Answer 1

尝试使用vertical-align，例如：vertical-align: middle。我会试着在一秒钟内拿出一个演示。

这是演示：http: //jsfiddle.net/wMb8t/1/

CSS

li{
    display: inline-block;
    width: 120px;
    border: 1px solid black;
    margin: 5px;
    vertical-align: top;
}

Answer 2

因为你的块是inline-block，你应该添加vertical-align:top;