コンテンツ中心のdivのレベル

いくつかの方法が、私は非常に明確ではなかったとして、良いか悪いか、div要素内のコンテンツのいくつかのレベルの下で今日中心にまとめてある手の込んだないだろう、次の兄が弟に感謝を示すことができます持っていると思ってい

1.まず、マージンプロパティは、アップダウンの固定と、左と右の適応、従来のものです

        < スタイル> 
            .div5 { 
                幅：200pxの。
                国境：1pxの固体darkgoldenrod 。
                
            } 
            .div5 P { 
                ボーダー：1ピクセル固体darkorange 。
                    利益率：25％自動; 
    幅：100ピクセル; 
            } 
        </ スタイル> 
        < divのクラス= "DIV5" > 
            < P > 
                これはデモです 
                これはデモです
                これはデモです
                。このデモです
            。</ P >     
        </ DIV >

2.div適応性の高いケース

DIVの高さに設けられていない場合には、延伸される内容は、コンテンツは自動的に垂直方向の中心は、現時点では提供されている必要はなく、単一の行または複数行のいずれかで、DIV内に充填され、自動的に中央にコンテンツ、

空白のままにされるだけで、コンテンツの周りのパディング要素を加えることで、より直感的なのいくつかの効果を見たいと思って、水平方向と垂直方向のセンタリングを達成するために

        < スタイルタイプ= "テキスト/ cssの" > 
            .div1 { 
                幅：200pxの。
                国境：1pxの固体赤。
                パディング：20ピクセル; 
            } 
        </ スタイル> 
        < divのクラス=「DIV1」> 
            これはデモです
            。このデモで
            、これはデモで
            、これはデモです
            
        。</ DIV >

3.複数の行の高さを設定します。

行の高さによって、テキスト行は、私たちが解決することができた場合

私たちは、内側に、ブロックレベルのタグの<div> <P>の行を複数追加する必要があります

3.1絶対位置、文書の流れから抜け出す方法

 < スタイルタイプ= "テキスト/ cssの" > 
             .div2 { 
                 幅：200pxの。
                 高さ：200pxの。
                 国境：1pxのソリッドブルー; 
                 位置：相対; 
             } 
             .div2 P { 
                 幅：150ピクセル。
                 国境：1pxの固体blueviolet 。
                 位置：絶対; 
                左：50％ 。
                トップ：50％; 
                変換：変換（-50％、-50％）
              } 
         </ スタイル> 
        < divのクラス= "DIV2" > 
            < P > 
                これはデモで
                、これはデモです
                。このデモで
                、これはデモです
            。</ P >     
        </ DIV >

3.2アナログ表形式

< スタイル> 
            .div3 { 
                 幅：200pxの、
                 高さ：200pxの; 
                 ボーダー：1ピクセル固体グリーン; 
                 表示：表; //この要素は、（<TABLE>と同様の）ブロックレベルのテーブルとして表示され、テーブル前後改行有します。
             } 
             .Div3 P { 
                 
                 ボーダー：1ピクセル固体darkred ; 
                 表示：表細胞; //テーブル（<TD>と<TH>と同様の）セルとして表示され、この要素
                 左の縦-ALIGN = ：ミドル。
                 テキスト整列：センター; 
                 
             } 
        </ スタイル> 
        < divのクラス= "DIV3" > 
            < P > 
                これはデモです
                。このデモで
                、これはデモです
                。このデモです
            。</ P >     
        </ DIV >

4.CSS3Flexレイアウト

<スタイル>
.div4 {
幅：200pxの。
高さ：200pxの。
国境：1pxの固体darkgoldenrod。
表示：フレックス。
正当化-コンテンツ：センター;
ALIGN-アイテム：センター;
}
.div4 P {
ボーダー：1ピクセル固体darkorange。
}
</スタイル>
の<divクラス= "DIV4">
<P>
これはデモです
。このデモで
、これはデモです
。このデモです
。</ P>
</ div>

これらはあなたが共有するための新たな方法に話せば、一般的な方法の弟です

コンテンツ中心のdivのレベル

おすすめ