3

可変の高さのコンテンツを垂直方向および水平方向に中央に配置するための最も効率的な（またはエレガントな）方法を探しています。私はこれを思いついた：http：//cssdeck.com/t/2veysdkg/16、これはcssテーブルを使用してメインコンテンツを垂直方向に中央揃えにします。

この特定のコードを書くための私の要求は次のとおりです。

  • 可変幅および固定幅のコンテンツを垂直方向および水平方向に中央揃えできる必要があります
  • 中央揃えのコンテンツは、通常のドキュメントフロー内にある必要があります（重複しないように）
  • スティッキーフッターと通常のヘッダー、どちらも幅100％
  • ハック、醜いコード、または非セマンティックHTMLを可能な限り少なくする
  • IE6、IE7のサポートについては気にしませんでした（それらには別のスタイルシートを使用します）

display:table-row奇妙なことに、上記の要求は、ヘッダーとフッターがに設定され、body-tagがに設定されている場合にのみ満たされdisplay:tableます。私が理解しているように、親テーブル要素が欠落している場合、cssは匿名テーブル要素を生成するため、これは奇妙です。したがってdisplay:table-cell、周囲のすべての要素がなくても機能するはずですが、それでも私はそれを機能させることができませんでした。

自分次第だとしたら、bodyタグの表示モードを台無しにせず、ヘッダーとフッターをオンのままにしておきdisplay:blockます。しかし、私はそれを機能させることができませんでした。なぜこれが機能しないのか、そしてとを使用せずに上記の要求を満たす方法を誰かが理解していますdisplay:tableかdisplay:table-row？

cssdeckにアクセスして私のソースコードを表示したくない場合は、ここに投稿します。

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vertical Centering</title>
    </head>
    <body>
        <div id="header">header</div>
        <div id="vertical">
            <div id="horizontal">content</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: table;
}

#header {
    display: table-row;
    height: 2em;
    background: gray;
}

#vertical {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#horizontal {
    height: 500px;
    width: 500px;
    margin: auto;
    background: gray;
}

#footer {
    height: 2em;
    display: table-row;
    width: 100%;
    background: gray;
}
4

7 に答える 7

6

表示プロパティの仕組み

display プロパティを使用すると、要素をテーブル要素であるかのように表示するために、テーブル関連の値の範囲を指定できます。使用可能な表示値は次のとおりです。

  • table要素をテーブル要素のように振る舞わせます
  • table-row要素をテーブル行 (tr) 要素のように動作させます
  • table-cell要素をテーブル セル (td) 要素のように動作させる
  • table-row-group要素をテーブル本体の行グループ (tbody) 要素のように動作させます
  • table-header-group要素をテーブル ヘッダー行グループ (thead) 要素のように動作させます
  • table-footer-group要素をテーブル フッター行グループ (tfoot) 要素のように動作させます。
  • table-caption要素をテーブル キャプション要素のように動作させます
  • table-column要素を表の列 (col) 要素のように動作させます
  • table-column-group要素をテーブル列グループ (colgroup) 要素のように動作させます

ここで完全なリストを確認してください... http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

しかし、あなたの問題はこのように解決できます

動作中のフィドルを確認してくださいhttp://jsfiddle.net/jZJXf/1/

Css はこのようになっている必要があります。

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: table;
}


#header {
    width: 100%;
    height: 2em;
    background: gray;
}

#vertical {
    display: table;
    width: 100%;
    height: 100%;
}

#horizontal {
    display:table;
    height: 500px;
    width: 500px;
    margin: 10% auto 0% auto;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
    bottom: 0px;
    display: table;

}
于 2012-06-11T07:02:58.617 に答える
5

実際、ブラウザは予想どおり匿名のテーブル要素を挿入しています。ただし、この要素は、テーブル セマンティクスを機能させるためだけに存在します。CSS には、この匿名ブロックをターゲットにして、レイアウトが必要とする 100% の幅と高さを与える方法はありません。

プレゼンテーションを変更したい場合は、HTML 内に「テーブル」オブジェクトとして機能する実際の要素が必要です。

于 2012-06-10T14:00:53.793 に答える
0

私のためのこの作品（CSS）：

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
}

#header {
    height: 2em;
    background: gray;
}

#vertical {
    display: table-cell;
    vertical-align: middle;
    width: 500px;
    height: 500px;
}

#horizontal {
    height: 300px;
    width: 300px;
    margin: auto;
    background: gray;
}
于 2012-06-08T11:55:38.967 に答える
0

あなたの問題はレイアウトです。テーブルを表示する開始divが必要です。次に、その内部で、テーブル行を表示するdivを次に示します。そこの中にあなたはあなたのテーブルセルdivを次にします。

<div id="testTable">
  <div id="testRow">
    <div id="testCell"></div>
    <div id="testCell"></div>
  </div>
  <div id="testRow">
    <div id="testCell"></div>
    <div id="testCell"></div>
  </div>
 </div>

それはあなたのdivのレイアウトでなければなりません。

CSSは次のとおりです。

#testTable {
display: table;
}
#testRow {
display: table-row;
}
#testCell {
display: table-cell;
}

当然、必要なコンテンツをdivに追加し、追加のフォーマットをCSSに追加します。ただし、この概要はガイドラインとして役立ちます。視覚的な参照が必要な場合は、このサイトをチェックしてください。http://www.quirksmode.org/css/display.html

于 2012-06-08T11:55:39.563 に答える
0

私の意見では、問題はdivの高さ/幅の%です。必ずしも問題ではありませんが、期待した結果が得られない理由です。

HTML テーブルと同じように、「display: table-cell」要素をテーブルとテーブル行で囲む必要があります。

何も見つからない場合は、匿名テーブルとテーブル行が作成されます (コード内にあります)。問題は、匿名テーブルがコンテンツを自動縮小するように設定されることです。

さらに、内容が理解できない場合、内容のサイズを設定しようとしても無視されます。コンテンツに高さ/幅を指定しましたが、現在は table-cell に匿名テーブルの 100% を占めるように指示しているため、ブラウザーには意味がありません。

基本的に、テーブルが必要な理由は、ブラウザが領域の寸法をインテリジェントに判断できるようにするためです。ただし、本体に設定する必要はありません。

于 2012-06-10T13:54:51.437 に答える
0

私が思いついたもの (これは設計/コードの要求を満たし、余分な複雑さ/非意味的な html を少し追加するだけです)。

  • 長所: display:table に body タグを設定する必要はなく、display:table-row にヘッダー/フッターを設定する必要はありません。
  • 短所: display:table タグ用に追加の (セマンティックでない) div が必要です。

ここで確認してください: http://cssdeck.com/t/2veysdkg/51 .

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vertical Centering</title>
    </head>
    <body>
        <div id="header">header</div>
        <div id="table">
            <div id="tablecell">
                <div id="content">content</div>
            </div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#header {
    height: 2em;
    background: gray;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
    margin-top: -2em;
    margin-bottom: -2em;
}

#tablecell {
    display: table-cell;
    vertical-align: middle;
}

#content {
    height: 500px;
    width: 500px;
    margin: 2em auto 2em;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
}
于 2012-06-11T10:03:18.617 に答える
0

このCSSを使用してHTMLを試してみてください.10％の上、下のマージンについてはわかりませんが、CSSデッキでうまくいきました.

body, html {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 2em;
    background: gray;
}

#vertical {
    display: table;
    width: 100%;
    height: 100%;
}

#horizontal {
    display:table;
    height: 500px;
    width: 500px;
    margin: 10% auto;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
    bottom: 0px;
}
于 2012-06-11T03:12:19.277 に答える