CSS vertical-align 不适用于以百分比表示的尺寸

Question

我有两个嵌套容器，.button-1x1 和内部 .button-content。我想将 .button-content 尺寸表示为百分比，如果我这样做，则垂直对齐属性未运行。如果我将宽度和高度设置为 px 值，它运行良好。为什么？

外部容器的尺寸表示为 px 值，所以我想我可以将嵌套尺寸表示为百分比，这将使我的 css 更易于维护。但这不起作用。

在这里 fiddle :http://jsfiddle.net/pjZ8g/5/

代码:

<style type='text/css'>
.absolute {position:absolute}
.bg-teal {
  background-color:#abc;
}
.button-content {
  width:100%; /** Change this to px, and it will work */
  height:100%; /** Change this to px, and it will work */
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  text-transform:uppercase;
}

.button-1x1 {
  width:230px;
  height:230px;
}
</style>
<div class='button-1x1 relative'>
    <div class='button button-1x1 bg-teal absolute'>
      <div class='button-content'>
        <span>test1</span>
      </div>
    </div>
</div>​

Answer 1

这是 techfoobar 的另一种方法。

更改 <div class='button button-1x1 bg-teal absolute'>样式包括 display:table .

参见 http://jsfiddle.net/pjZ8g/9/