2

親 div 内に動的サイズのテーブルを配置しようとしています。親コンテナの高さは設定されており、内部テーブルの高さは不明 (可変) です。テーブルのサイズが不明であるため、余白/相対的な位置調整は機能しないと思います。これはできますか？現在、コードは次のようになっています。

html:

<div id="wrapper">
 <div id="board">
      <table id="evolve">...</table>
 </div> 
</div>

CSS:

#wrapper {
    width: 100%; 
    height: 100%; 
}
#board {
    position: relative;
    margin: auto; 
    width: 265px; 
    height: 222px; 
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}
.evolve {
    border: 1px black solid;
    margin: auto;
    position: relative;
}
4

2 に答える 2

1

希望するCSSコード

#board {
    display:table-cell;
    width: 265px; 
    height: 222px; 
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
}
.evolve {
    border:solid 1px black;
        }

更新 ラッパーの幅に応じて左のパディングを変更する必要があります（100％に設定すると機能します）

#wrapper {
    height: 100%;
    padding-left:36%;
}
#board {
    display:table-cell;
    width: 265px; 
    height: 222px; 
    vertical-align: middle;
    border: 1px solid black;
}
.evolve {
    border: 1px black solid;
   }

より良い解決策を見つけたらすぐに更新します

于 2012-05-16T05:54:52.143 に答える
0

line-heightの と同じようにheight定義できますDIV。次のように書きます。

#board {
    position: relative;
    margin: auto;
    width: 265px;
    height: 222px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    line-height:222px;
}
#board .evolve {
    border: 1px black solid;
    margin: auto;
    position: relative;
    line-height:1.5;
}

これをチェックしてくださいhttp://jsfiddle.net/X4L5A/1/

于 2012-05-16T05:59:57.240 に答える