Css 垂直对齐答案

【问题标题】：Css Vertical AlignmentCss 垂直对齐
【发布时间】：2011-10-03 14:00:20
【问题描述】：

我在 div 中有单列顺序的按钮。按钮数是可变的。我想垂直对齐按钮。 “垂直对齐：中间”不起作用。我该怎么做？

Div 高度是固定的。 http://jsfiddle.net/WmD3L/ 如何垂直对齐这些按钮？

【问题讨论】：

介意向我们展示您的 HTML 和 CSS，好吗？可能有帮助。 :)

标签： css html vertical-alignment

【解决方案1】：

This is the best way 在我看来（IE8+）：

HTML：

<div class="block">
  <div class="centered">
    <div><input type="submit" value="ABC"/></div>
    <div><input type="submit" value="ABC"/></div>
    <div><input type="submit" value="ABC"/></div>
  </div>
</div>

CSS：

/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content:'';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

演示：http://jsfiddle.net/WmD3L/13/

【讨论】：

【解决方案2】：

如果按钮的高度是固定的，您可以使用 line-height 将文本放在中间。

例如

#button {
   height: 50px;
   line-height: 50px; //Must be the same as height to vertically align to the middle
}

你也可以使用

#button {
    display: table-cell;
    vertical-align: middle;
}

但不幸的是，我认为这不适用于跨浏览器。

【讨论】：