css_真ん中の道

中央は、CSSに分割することができる水平方向の中心と垂直方向の中心。水平中心中心線要素とブロック要素が中心両方の場合に、バルク要素は、に分割されている固定幅の中心ブロック要素と不定幅中心ブロック要素。以下は、この種の状況を詳しく説明します。

まず、中間レベル

図1に示すように、中心線要素

中心を達成するために：名前が示唆するように、親要素にテキスト整列設定することにより、等インライン要素のテキスト（テキスト）、画像（IMG）、ボタン、などのインライン要素のための唯一の中心インライン要素です。ブロックは、インライン要素のプロパティを表示するように設定されている場合はさらに、この方法を使用することもできます。しかし、子要素がフロートに影響を与えてはならないことを主な条件は、そうでない場合は、すべてが無駄です、そこにあります。

.div1 { 
        テキスト整列：センター。
    } 
<DIV CLASS = "DIV1">こんにちは</ div>

図2に示すように、センターブロック要素

（1）、固定幅の中心ブロック要素

素子満たす所定の幅と「左マージン」センタリングを達成するために「自動」であることによって提供される2つの条件のバルク（バルク要素の幅の幅は固定値です）。

.div1 { 
　　　　 幅：200pxの。
　　　　 国境：1pxの固体赤。
        マージン：0自動; 
    } 
<DIV CLASS = "DIV1">こんにちは</ div>

（2）、可変幅のブロック要素が中心

ページ数が不明であるので、我々はその弾性限界に幅を設定することはできませんので、実際には、我々は、そのようなページのページナビゲーションとして、中央で設定された「可変幅のブロック要素」への必要性が発生しました。（可変幅ブロック要素：ブロックの幅は、素子幅に固定されていません。）

中央のブロック要素の可変幅のための3つの方法があります。

方法1：

又はディスプレイ;テーブルタグの中に表示される添加元素は、タグテーブルは、「左マージン」に設定されているセンタリング達成するために「自動」である：表、次に「左マージン」とセンタリングを達成するために「自動」である要素を設定しました。ディスプレイの背面：テーブル;方法がより簡潔になります。

なぜテーブルタグを結合？タグを用いた適応テーブルの長さは、その長さを定義していない---即ち、デフォルトの長さは、親本体要素（テキスト内で決定その長さに応じてその長テーブル）ではないので、所定の幅のブロックと考えることができます水平方向の中心となるよう素子は、その後、ブロック中心の余白の幅を所定の方法を用いて。

例としては、次のとおりです：

表{ 
    マージン：0自動。
} 

の<div> 
<表> 
  <TBODY> 
    <TR> <TD> 
    <UL> 
        <LI>こんにちは</ LI> 
        <LI>こんにちは、世界ます。</ li> 
    </ ulの> 
    </ TD> </ TR> 
  < / TBODY> 
</ TABLE> 
</ div>

.wrap { 
    背景：#CCC。
    ディスプレイ：テーブル。
    マージン：0自動; 
} 

<DIV CLASS = "ラップ"> 
  こんにちは   
</ div>

方法2：

インライン型ディスプレイ（列内に配置された表示素子）としてのブロックレベル要素を変更し、テキスト整列を使用する：中心センタリング効果が達成されます。

このアプローチの第一の方法に比べて利点は何の意味タグは増加しませんが、いくつかの問題があるさ：表示タイプは、要素をブロックしますいくつかのそれほど機能など、インラインを変更し、インライン要素になりました値が設定された長さ（インラインブロックは、設定された幅と高さになることができます）。

{.containerの
    テキスト整列=左：センター; 
 } 
.container UL { 
    リストスタイル：なし; 
    マージン：0; 
    パディング：0; 
    表示を実行します。インライン; //この文は効果なしと同じですか？
 } 

<DIV CLASS = "コンテナ"> 
    <UL> 
        <LI>のHello World </ LI> 
        <LI>のHello World </ LI> 
    </ UL> 
</ div>

方法3：

相対及び左：相対及び左：50％を、子要素設定位置、親要素が位置に設定され、浮動する親要素により設定された-50％のレベルを中心達成します。

.wrap { 
    フロート：左; 
    位置：相対; 
    左：50％; 
    クリア：両方; 
} 
.wrapセンター{ 
    背景：#CCC。
    位置：相対; 
    左：-50％; 
} 

<divのクラスには、= "ラップ"> 
    <DIV CLASS = "-センターを包む">こんにちは</ div> 
</ div>

まず、透明フロートをラップ親要素を設定し、その後、フローティングのまま。ラップポジショニングが50％右にオフセットしてみましょう。子要素は、親要素に対して定義されている50％左側にシフトしました。親要素から。少し理解できる境界線を追加します。また、絶対位置でそれも可能です。

第二に、垂直方向のセンタリング

単一行のテキストは、垂直親要素を決定中心の高さ、ならびに親要素の高さによって決定される複数行のテキストに分割することができます。

図1に示すように、垂直中心線テキストは、親要素の高さを決定する方法は、親要素と行の高さの高度に一貫した高さを提供することによって達成されます。（高さ：エレメントの高さ、行の高さ：名前が示す、高い行は、テキスト内のベースラインとの間と線の間の距離を指します）。

.wrap H2 { 
    マージン：0。
    高さ：100pxに。
    行の高さ：100pxに。
    背景：#CCC; 
} 

<divのクラスには、= "ラップ"> 
    <H2>こんにちは</ H2> 
</ div>

図2に示すように、複数行のテキストの親要素の高さを決定します

2つの方法があります。

方法1：

タグ、および設定垂直整列（TBODY、TR、TDを含む）を使用挿入表：真ん中。

{.Wrapの
    高さ：300ピクセルによって; 
    背景：#CCC; 
    垂直整列：中央; / * TDのデフォルトのラベル垂直整列真ん中のデフォルト設定に、明示的に設定する必要はありません* / 
} 

<表> 
    <TBODY > 
        <TR> 
            <TDクラス= "ラップ"> 
                の<div> 
                    <P>のHello World </ P> 
                    <P>のHello World </ P> 
                    <P>のHello World </ P> 
                </ div> 
            </ TD> 
        </ TR> 
    </ TBODY> 
</テーブル>

.wrap { 
    背景：#CCC。
    ディスプレイ：テーブル。
    垂直整列：中央; 
} 

<DIV CLASS = "ラップ"> 
    <P>こんにちは</ P> 
    <P>こんにちは</ P> 
    <P>こんにちは</ P> 
</ div>

方法2：

表示テーブルセルに設けられたブロックレベル要素（表として表示部）、活性化垂直-alignプロパティ。しかし、この方法は、比較的貧しい互換性があり、IE6,7はこのスタイルをサポートしていません。

.wrap { 
    高さ：300ピクセル。
    背景：#CCC; 
    
    表示：テーブルのセル; / * IE8以上及クロム、Firefoxの* / 
    垂直-ALIGN：ミドル; / * IE8以上及クロム、Firefoxの* / 
} 

<DIV CLASS = "ラップ"> 
    <P>こんにちは</ P> 
    <P>こんにちは</ P> 
    <P>こんにちは</ P> 
</ div>

おすすめ