-1

ネストされた2つのコンテナー、.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>​
4

2 に答える 2

1

この更新されたフィドルを確認してください: http://jsfiddle.net/25JXw/1/

これを実現するline-heightには、コンテンツを中央揃えにする DIV に を指定します。line-heightデモでわかるように、内部 DIV の CSS ジェネリックを維持しながらこれを行うには、フォームを親から継承できます。

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 に答える