cssは水平中央と垂直中央とそのブラウザ互換性を実現する

10756 ワード

Webサイトのレイアウトや画像の表示にかかわらず、水平方向の中央と垂直方向の中央が必要な場合がよくあります.今日、cssの水平中央と垂直中央の一般的な方法について、さまざまなブラウザの下でテストとまとめを始めます.
ブラウザの説明:本明細書で説明するブラウザおよびそのバージョンは以下の通りである(以下、バージョン番号を書かないものについてはこれに準ずる):IE 7 IE 8標準版IE 9標準版FireFox 13.01 Chrome 20.0.1132.47 Safari 5.1.7(7534.57.2)Opera 12
中央要素:ピクチャ(img)と非ピクチャ(div)の2種類に分けられ、自分で検出するにはピクチャのsrcを利用可能なリンクに変更して行い、この文を書くときに番号で置き換えてください.
一、水平中央
1. text-align:center
コードは次のとおりです.

<!DOCTYPE>
<html >
<head>
    <title>    </title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .h-align{ text-align:center;}
    </style>
</head>
<body>
    <div class="container h-align">
        <div class="box"></div>
    </div>
    <div class="container h-align">
        <img width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

互換性は次のとおりです.
div: IE7
img: IE7 IE8 IE9 FireFox Chrome Safari Opera
注意:親要素がfloat:leftを設定している場合.ではtext-align:center;無効になります.
2. margin:auto
コードは次のとおりです.

<!DOCTYPE>
<html >
<head>
    <title>    </title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .h-align{ margin:auto;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box h-align"></div>
    </div>
    <div class="container">
        <img class="h-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

互換性は次のとおりです.
div: IE7 IE8 IE9 FireFox Chrome Safari Opera
img: none
3.1、2に対して修正テストを行う
上の1と2では、多くのブラウザtext-align:centerを見ました.img(デフォルトinline-block)のみ有効、margin:autoはdiv(デフォルトblock)のみ有効ですが、今回はimgをblockに設定し、divをinline-blockに設定してからテストしてみましょう.
コードは次のとおりです.

<!DOCTYPE>
<html >
<head>
    <title>    </title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green;}
        .box{ width:120px; height:90px; border:1px solid Green; display:inline-block;}
        .h-align-div{ text-align:center;}
        .h-align-img{ margin:auto auto; display:block;}
    </style>
</head>
<body>
    <div class="container h-align-div">
        <div class="box"></div>
    </div>
    <div class="container">
        <img class="h-align-img" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

互換性は次のとおりです.
div: IE7 IE8 IE9 FireFox Chrome Safari Opera
img: IE7 IE8 IE9 FireFox Chrome Safari Opera
以上の結果からtext-align:center;とmargin:autoは主に要素のdisplay属性を見ます.
4.既知の幅の絶対位置
ジオメトリの観点から、親要素の中点から左に移動するには、中心要素の幅の1/2が必要で、要素を中心にすることができます.
コードは次のとおりです.

<!DOCTYPE>
<html >
<head>
    <title>    </title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .h-align{ position:absolute; left:50%; margin-left:-60px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box h-align"></div>
    </div>
    <div class="container">
        <img class="h-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

互換性は次のとおりです.
div: IE7 IE8 IE9 FireFox Chrome Safari Opera
img: IE7 IE8 IE9 FireFox Chrome Safari Opera
5.未知幅の絶地位置決め(left:0;right:0;margin:auto;)
この方法では,絶対位置決めとmarginを用い,左右を0としてブラウザが具体的な位置を決定できないように中央に位置するが,この方法では左右を0とmarginのどちらも欠けてはならない.
コードは次のとおりです.

<!DOCTYPE>
<html >
<head>
    <title>    </title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .h-align{ position:absolute; left:0; right:0; margin:auto;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box h-align"></div>
    </div>
    <div class="container">
        <img class="h-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

互換性は次のとおりです.
div: IE8 IE9 FireFox Chrome Safari Opera
img: IE8 IE9 FireFox Chrome Safari Opera
以上が様々な水平中心の方法です.
二、垂直中央
水平方向の中央に対して垂直方向の中央に位置するのはそんなに簡単ではありません.以下、いろいろな方法で順番にテストします.
1.既知の高さ絶対位置
具体的な原理は水平中央対応の方法4を参照する.
コードは次のとおりです.

<!DOCTYPE>
<html >
<head>
    <title>    </title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .v-align{ position:absolute; top:50%; margin-top:-45px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box v-align"></div>
    </div>
    <div class="container">
        <img class="v-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

互換性は次のとおりです.
div: IE7 IE8 IE9 FireFox Chrome Safari Opera
img: IE7 IE8 IE9 FireFox Chrome Safari Opera
2.table-cellメソッド
tableでは、内側要素を水平中央と垂直中央に配置するのが簡単であることを知っていますが、今回は親要素のdisplayプロパティをtable-cellに設定することで垂直中央を実現します.
コードは次のとおりです.

<!DOCTYPE>
<html >
<head>
    <title>    </title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .v-align{ display:table-cell; vertical-align:middle;}
    </style>
</head>
<body>
    <div class="container v-align">
        <div class="box"></div>
    </div>
    <div class="container v-align">
        <img class="" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

互換性は次のとおりです.
div: IE8 IE9 FireFox Chrome Safari Opera
img: IE8 IE9 FireFox Chrome Safari Opera
3.未知の高さ絶対位置
このメソッドは、水平方向の中央にあるメソッド5です.
コードは次のとおりです.

<!DOCTYPE>
<html >
<head>
    <title>    </title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green; position:relative;}
        .box{ width:120px; height:90px; border:1px solid Green;}
        .v-align{ position:absolute; top:0; bottom:0; margin:auto;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box v-align"></div>
    </div>
    <div class="container">
        <img class="v-align" width="120px" height="90px" src="#" alt="" />
    </div>
</body>
</html>

互換性は次のとおりです.
div: IE8 IE9 FireFox Chrome Safari Opera
img:IE 8 IE 9 FireFox Chrome Safari Opera(このOperaブラウザがこのバージョンにアップグレードされるまではだめですが、テストの日にアップグレードに遭遇しました)
4.未知の高さinline-blockメソッド
私たちはimg要素に対してvertical-align:middleを設定することを知っています.左または右のテキストの中央に配置できます.このヒントを得て、中央に配置する要素をinline-blockに設定し、inline-blockの要素を追加し、高さ100%と垂直中央に設定して中央に配置します.
コードは次のとおりです.

<!DOCTYPE>
<html >
<head>
    <title>    </title>
    <style type="text/css">
        .container{ width:200px; height:120px; border:1px solid Green;}
        .box{display:inline-block;  width:120px; height:90px; border:1px solid Green;}
        .v-align{ display:inline-block; height:100%; vertical-align:middle;}
        .v-middle{vertical-align:middle;}
    </style>
</head>
<body>
    <div class="container">
        <div class="box v-middle"></div>
        <b class="v-align"></b>
    </div>
    <div class="container">
        <img class="v-middle" width="120px" height="90px" src="#" alt="" />
        <b class="v-align"></b>
    </div>
</body>
</html>

互換性:
div: IE8 IE9 FireFox Chrome Safari Opera
img: IE7 IE8 IE9 FireFox Chrome Safari Opera
以上が垂直中心の方法です
三、まとめ
1.divについては、すべてのテストブラウザを中央に配置し、互換性を持たせることができます.
水平方向中央:2,3,4
垂直方向中央:1
2.imgについては、すべてのテストブラウザを中央に配置し、互換性を持たせることができます.
水平方向中央:1,3,4
垂直方向中央:1,4
以上の結果から,要素の高さ幅が分かれば水平の4と垂直の1で水平垂直中心を実現するのがよい選択であることが分かった.
要素の幅が分からない場合は面倒ですが、もちろん水平方向の中央と垂直方向の中央を選択する方法を組み合わせて使用することができます.例えば、画像に対して水平1と垂直4の組み合わせを選択して実現することができますが、欠点は要素を追加することです.
宝を洗うfont-sizeメソッドやcssのexpressを通じて中央の文を実行するなど、中央にいる他の方法があります.バックグラウンドの中央にbackgroundのcenterプロパティを直接設定すればいいです.
では、cssの水平中心と垂直中心についてここまで議論したいと思います.

Webフロントエンド入門から実戦:cssは縦中央のN種類のシーンとN種類の方法を実現する

css背景色透明、文字不透明