1

テンプレートに3行のプライマリdivがあります。ヘッダー、コンテンツラッパー、フッターがあります。ヘッダーは上部に突き当たっており、フッターは下部に突き当たっています。2つの間にコンテンツラッパーdivがあります。基本的に、コンテンツラッパーを2つのdiv内で垂直方向に中央揃えにします。コンテンツdivは常に動的な高さになるため、line-heightメソッドは機能しません。これに使用するのに最適な方法は何ですか？

4

3 に答える 3

2

コンテンツを垂直方向に中央揃え

JavaScriptを使用せずに、動的コンテンツを垂直方向に中央揃えにする方法は限られています。

  1. HTMLテーブル
  2. CSSテーブル
  3. CSS3フレックスボックス
  4. CSS3グリッド

このような場合、最新のアプローチは、HTMLテーブルと同等のCSSテーブルを使用することです。ただし、IE7以前のサポートが必要な場合は、代わりにHTMLテーブルを使用してください。Flexboxはこの特定のケースには適しておらず、IE9以前ではサポートされていません。CSSグリッドは現在IE10でのみサポートされており、標準はまだ完成していません。

CSSテーブルの基本的な使用法は次のとおりです。

HTML

<div class="table">
    <div class="row">
        <div class="cell">Content</div>
    </div>
</div>

CSS

.table {display: table;}
.row   {display: table-row;}
.cell  {display: table-cell;}

デモ   （テスト済み：IE8 / 9/10、FF、Chrome、Safari、Opera）

HTMLテーブルとCSSテーブルのどちらかを選択する

表形式のデータ（データのグリッドなど）の場合は、HTMLテーブルの使用をお勧めします。この場合、より意味的に正しく、ソースコードの性質をより簡単に理解できるため、アクセシビリティとSEO（およびコードの保守性）に役立つ可能性があります。

非表形式のデータ（一般的なレイアウトなど）の場合は、 CSSテーブルの使用を優先します（フロートとCSSの配置が適切でない場合）。HTMLテーブルを使用すると表形式のデータが期待できるため、セマンティック的に正しくなり、スクリーンリーダーや検索エンジンの混乱が少なくなる可能性があります。レイアウトの具体的な用途には、垂直方向の中央に配置されたコンテンツと同じ高さの列があります。

HTMLテーブルに対するCSSテーブルの特定の利点の1つは、のサポートですvisibility:collapse。これにより、行または列を折りたたむことができます（HTMLテーブルでは実行できない機能）。表形式のデータにその特定の機能が必要な場合は、CSSテーブルを使用してください。

于 2013-03-04T17:05:30.137 に答える
0

次のコードを使用してこれを行うことができます：-

<div> using display:table-cell; vertical-align:middle
于 2013-03-04T06:09:09.193 に答える
0

苦痛を軽減し、3つの別々の容器に分けてください。

#header {
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#content{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}
#footer{
    width:1000px; /* or what ever width you need */
    margin-left:auto;
    margin-right:auto;
    clear:both;
    overflow:hidden;
}

<div id="header">test</div>
<div id="content">test</div>
<div id="footer">test</div>

オーバーフローのhidden属性により、divが自動的に展開され、追加された追加のコンテンツが表示されます。これにより、テーブルセルのように動作します。

ここにリンクの説明を入力する例を示します

于 2013-03-04T14:10:28.810 に答える