DIVは、問題を中心に。

1.従来のHTML CSS 水平中心(フレームのフロントエンドが含まれていません)

     1.1:固定幅の設定方法

            キーコード説明:幅集中要素はマージンを設定し、その後、設定する必要があります

    

1  <!DOCTYPE HTML > 
2  < HTML > 
3      < ヘッド> 
4          < メタ> 
5      </ ヘッド> 
6      < スタイル> 
7。        
8。 
9つの。       DIV { 
10  500pxなど;   //幅を設定する必要があり、以下のマージンが有効である
 11。             マージン自動0 ; 
12は、             境界1ピクセル固体; 
13である         } 
14   </ スタイル>
15   < ボディ> 
16          < DIV > 
17              AAAA
 18          </ DIV > 
19      </ ボディ> 
20  </ HTML >

    1.2:ブロック内の行は、設けられた素子行インラインブロック内の中心に配置されています

           キーコード説明:サブ要素は、表示ライン内に設定されている必要があり、親がテキスト要素を中央に設定する必要があります

<!DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタ> 
    </ ヘッド> 
    < スタイル> 
        .pages2 { 
            テキスト整列=左センター; //は、サブ素子列が現実、唯一の真ん中に配置され、親要素を中心とするテキストを設定する
            境界線を  固体を1ピクセル; 
        } 

        .pages2のDIV { 
            表示インラインブロック; //子要素を設定する必要があり
           境界1ピクセル固体; 500pxなど; 
        } 
    </ スタイル> 
    < ボディ> 
    < DIV クラス= "pages2" > 
        < DIV > 
            AAAA 
        </ DIV > 
    </ DIV > 
    </ ボディ> 
</ HTML >

1.3浮動センターの設定

     キーコード説明:反対側に位置するオープン親要素、親要素のレベルの右側に浮かぶ、この時間を残し、

        この時間は、限り、一般的に浮動子要素の権利として、ちょうど中心に。

<!DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタ> 
    </ ヘッド> 
    < スタイル> 
 

        .pages2 { 
            ボーダー2ピクセルレッドソリッド; 
            位置相対; //は、相対的な位置有効にする必要があります50%を; //親要素を作りますちょうどいいレベルで
            フロート; //ストリームオブジェクトを文書から、子の高さ、幅の要素コンテンツの幅を位置決めするため、フィット
         } 

        .pages2 div要素を{ 
            ボーダー1ピクセル固体; 
            位置相対; 反対側に位置//オープンサブ要素50%; 親要素に対して//に対して、オフセット、ちょうど中心の右半分
            フロート; //嵌合位置決め
         } 
    </ スタイル> 
    < ボディ> 
    <をdiv クラス= "pages2" > 
        < divの> 
            AAAAA 
        </ DIV > 
    </ DIV > 
    </ ボディ> 
</ HTML >

1.4:設定幅:フィット・コンテンツ

      キーコード説明:親要素の幅を設定:フィット・コンテンツのセンタリング効果を得ることができます

<!DOCTYPE HTML > 
< HTML > 
    < ヘッド> 
        < メタ> 
    </ ヘッド> 
    < スタイル> 
 
    .CON { 
        国境1pxの固体; フィットコンテンツ//必须设置フィット-コンテンツ-moz-フィットコンテンツ
        マージン     自動; 
    } 
    </ スタイル> 
    < 身体> 
< divのクラス= "詐欺" >
    < divのクラス= "pages2" > 
        < divの> 
            AAAAA 
        </ DIV > 
    </ DIV > 
</ DIV > 
    </ ボディ> 
</ HTML >

1.5

 

おすすめ

転載: www.cnblogs.com/jack-xsh/p/11567614.html