自由でクリエイティブな暮らしを応援!
Search

CSSで真ん中に配置(センターリング)する方法

CSSで真ん中に配置(センターリング)する方法

 

 

XHTML

    <div class="main">
        <h2>ブロックレベル要素をセンタリング</h2>
        <p>ブロックレベル要素</p>
    </div>  

 

CSS

    .main {
        width: 100%;
        margin: 0 auto;
    }

 

横幅を縮めて真ん中に配置するCSSコード

.main div   {
    width: 80%;
    margin: 0 auto;
}  

classで指定した部分を真ん中にする時は「margin: 0 auto;」と指定。

 

 

auto非対応ブラウザの対応方法

IE(インターネットエクスプローラー)への対策

IE5.5やIE5ではauto非対応なので、対応させるためにこの様にCSS記述。

.main {
    width: 100%;
    border: 1px solid #000;
    text-align: center;
}
横幅を縮めて真ん中に配置するCSSコード
.main {
    width: 80%;
    border: 1px solid #FF0000;
    margin: 0 auto;
    text-align: left;
} 

 

この様に記述しておけば、全てのブラウザで真ん中(センタリング)表示できます。

 

 

]]>

いいね、シェア、フォロー歓迎!2020テーマは「自然から学び自然と共に生きる」

EVAHKS

運営:嶋耕作(しまこうさく)『相場の熊さん』の愛称で親しまれているFX裁量トレーダー、ライター。自然が好きで日本国内に山所有。ひいお爺様は外交官。20代前半に教育関連事業にて年商3億円達成。その後、肺炎で臨死体験。世界人口4%の性格タイプを持つ。自由と安定。混乱と静寂。異なる性質のふたつを併せ持っている。趣味は読書、映画、アニメ、PUPG、人狼ジャッジメント、バスケ、音楽。好きな場所は、海、森、温泉、猫の肉球。漫画の島耕作はサラリーマンですが、サラリーマンはこの世で一番やりたくない仕事です。

1 Comment
  1. […] CSSで真ん中(センターリング)配置する方法 […]

Leave a Comment

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください