Question

我有两个嵌套容器，.button-1x1和内部.button-content。我想以百分比表示.button-content维度，如果我这样做，则vertical-align属性不会运行。如果我将宽度和高度设置为px值，它运行正常。为什么？

外部容器的维度表示为px值，所以我认为我可以将嵌套维度表示为百分比，这样可以使我的css更加可维护。但这不起作用。

在这里小提琴：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

检查此更新的小提琴：http://jsfiddle.net/25JXw/1/

您可以通过为要在其中对齐内容的DIV指定line-height来实现此目的。要在保持内部DIV的CSS通用的同时执行此操作，您可以继承父级的line-height形式，如演示中所示。

<强> CSS

.button-content {
  width:100%;
  height:100%;
  display: block; /* change to block OR remove */
  vertical-align: middle;
  text-align:center;
  text-transform:uppercase;
  line-height: inherit; /* new */
}

.button-1x1 {
  width:230px;
  height:230px;
  line-height: 230px; /* new */
}

Answer 2

这是techfoobar的替代方法。

将<div class='button button-1x1 bg-teal absolute'>样式更改为包含display:table。

请参阅http://jsfiddle.net/pjZ8g/9/

CSS vertical-align不能与以百分比表示的维度一起使用

2 个答案: