-1

我有两个嵌套容器，.button-1x1 和内部 .button-content。我想将 .button-content 尺寸表示为百分比，如果我这样做，则垂直对齐属性未运行。如果我将宽度和高度设置为 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>​
4

2 回答 2

1

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

line-height您可以通过为要在其中中间对齐内容的 DIV指定 a 来实现此目的。要做到这一点，同时保持内部 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 */
}
于 2012-09-22T01:24:12.133 回答
1

这是 techfoobar 的另一种方法。

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

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

于 2012-09-22T01:27:32.197 回答