0

次のマークアップ（フィドル）.spinnerで要素を垂直方向に中央に配置しようとしています。

<div class=grid>
  <div class=spinner></div>
  <table>
    <tr><td>row 1 cell 1</td><td>row 1 cell 2</td></tr>
    <tr><td>row 2 cell 1</td><td>row 2 cell 2</td></tr>
    <tr><td>row 3 cell 1</td><td>row 3 cell 2</td></tr>
  </table>
</div>

次のスタイルで：

.spinner {
    position: relative;
    top: 50%;
    left: 50%;
    height: 3px;
    width: 3px;
    background-color: red;
}

プロパティをあるピクセル値に設定する.spinner topと、ブラウザは実際には値に従ってプロパティを配置しますが、パーセンテージに設定しようとすると、機能しません。

.spinner要素を垂直方向に中央に配置するにはどうすればよいですか？

.grid注：位置を相対位置に設定し、位置を絶対位置に設定できることは理解.spinnerしていますが、グリッドを静的に配置したままにしておきたいと思います。のスタイルを変更せずにこれは可能.gridですか？

4

1 に答える 1

3

まず、ポジショニングに設定してabsolute、ポジショニングを使用する必要があります。次に、要素に、、、、およびを設定します。固定の/があるので、と一緒に配置すると、要素が完全に中央に配置されます（例）。.gridrelativetopbottomleftright0.spinnerwidthheightmargin:auto;

.grid {
    position:relative;
}
.spinner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    height: 3px;
    width: 3px;
    background-color: red;
}

table {
    width: 100%;
}

最後のメモに応じて、いいえ、要素の静的な配置では不可能.gridです（要素内にラッパーを追加しない限り.grid）。これは、要素には、相対的な位置（要素が機能する場所）.spinnerを持つある種のコンテナがないと、テーブルの高さの寸法を知る方法がないためです。負のマージンまたは相対的な位置付けでこれを回避することはできますが、動的コンテンツ（現在のブラウザー/標準のセット）に対応することはできません。position:relative;.grid

于 2012-11-21T15:36:12.787 に答える