web-dev-qa-db-ja.com

CSSを使用したクロスブラウザーのdiv中央揃え

CSSを使用して水平および垂直にdivのrelativeを配置する最も簡単な方法は何ですか？ divの幅と高さは不明です。つまり、すべてのdiv次元で、すべての主要なブラウザーで機能するはずです。中央揃えを意味します。

私は次のものを使用して水平方向の配置を行うことを考えました：

margin-left: auto;
margin-right: auto;

私がしたように ここ 。

これは水平方向の配置に適したクロスブラウザーソリューションですか？

どうすれば垂直方向の配置を行うことができますか？

javascriptjqueryhtmlcssalignment
25
Misha Moroshko

水平方向の中央揃えは、要素のwidthがわかっている場合にのみ可能です。それ以外の場合、ブラウザは開始位置と終了位置を特定できません。

#content {
    width: 300px;
    margin: 0 auto;
}

これは完全にクロスブラウザ互換です。

垂直方向の中央揃えは、要素が絶対的に配置され、既知のheightがある場合にのみ可能です。ただし、絶対配置ではmargin: 0 auto;が機能しないため、別の方法でアプローチする必要があります。 topとleftを50%に設定し、margin-topとmargin-leftを負の半分に設定する必要がありますwidthおよびheightそれぞれ。

次に、コピーと貼り付けと実行不可の例を示します。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2935404</title>
    </head>
    <style>
        #content {
            position: absolute;
            width: 300px;
            height: 200px;
            top: 50%;
            left: 50%;
            margin-left: -150px; /* Negative half of width. */
            margin-top: -100px; /* Negative half of height. */
            border: 1px solid #000;
        }
    </style>
    <body>
        <div id="content">
            content
        </div>
    </body>
</html>

そうは言っても、垂直方向のセンタリングは通常、現実の世界ではめったに適用されません。

幅と高さが事前に本当に不明な場合は、Javascript/jQueryを取得してmargin-leftとmargin-topの値を設定し、クライアントがdivがすばやく移動することを確認できるという事実に応える必要があります。 "wtf？"を引き起こす可能性のあるページの読み込み経験。

32
BalusC

「要素が絶対位置にあり、高さがわかっている場合にのみ、垂直方向の中央揃えが可能です。」 –このステートメントは正確ではありません。

display:inline-block;を使用して、その親のボックス内で垂直に配置される可能性を試すことができます。この手法では、少なくとも親の高さを知っている必要がありますが、高さと幅を知らなくても要素を整列できます。

あなたのHTMLがこれなら;

<div id="container">
    <div id="aligned-middle" class="inline-block">Middleman</div>
    <div class="strut inline-block">&nbsp;</div>
</div>

そしてあなたのCSSは：

#container {
    /* essential for alignment */
    height:300px;
    line-height:300px;
    text-align:center;
    /* decoration */
    background:#eee;
}
    #aligned-middle {
        /* essential for alignment */
        vertical-align:middle;
        /* decoration */
        background:#ccc;
        /* perhaps, reapply inherited values, so your content is styled properly */
        line-height:1.5;
        text-align:left;
    }
    /* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin Edge." */
    #container .strut {
        /* parent's height */
        height:300px;
    }
.inline-block {
    display:inline-block;
    *display:inline;/* for IE < 8 */
    *zoom:1;/* for IE < 8 */
}

次に、＃aligned-middleが#containerの中央に配置されます。これはこのテクニックの最も簡単な使用法ですが、慣れるのに最適です。

「IE <8 * /」の「/ *」でマークされたルールは、条件付きコメントを使用して、別のスタイルシートに配置する必要があります。

これの実際の例をここで見ることができます： http://jsfiddle.net/UXKcA/3/

編集：（ie6とff3.6でテストされたこの特定のスニペットですが、私はこれを頻繁に使用しています。かなりクロスブラウザーです。ff<3のサポートが必要な場合は、display:-moz-inline-stack;内のdisplay:inline-block;の下に.inline-blockを追加する必要があります。 ）

7
Misha Reyzlin

これをチェックして Demo jsFiddle

次の2つを設定します

  1. HTMLalign属性値center

  2. CSSmargin-leftおよびmargin-rightプロパティ値セットauto

[〜＃〜] css [〜＃〜]

<style type="text/css">
     #setcenter{
          margin-left: auto;
          margin-right: auto;    
          // margin: 0px auto; shorthand property
     }
</style>

[〜＃〜] html [〜＃〜]

<div align="center" id="setcenter">
   This is some text!
</div>
2
Jay Patel

「事前に幅と高さが本当に不明な場合は、Javascript/jQueryを取得して、margin-leftとmargin-topの値を設定し、クライアントがページのロード中にdivがすばやく移動することを確認する必要があります。これは「wtf？」エクスペリエンスを引き起こす可能性があります。」

DOMの準備ができたらdivを.hide()し、ページが読み込まれるのを待ち、divを_margin-left_と_margin-top_の値に設定し、.show()をdiv再び。

_$(function(){
   $("#content").hide();
)};
$(window).bind("load", function() {
   $("#content").getDimSetMargins();
   $("#content").show();
});
_
0
nickarmstronggr