58

可変幅の浮動要素を水平方向に中央揃えにする方法は?

編集：私はすでにdiv、浮動要素のコンテナを使用し、コンテナにを指定しwidthて（コンテナに使用margin: 0 auto;）、これを機能させています。包含要素を使用せずに、または少なくとも包含要素に a を指定しなくても実行できるかどうかを知りたかっただけwidthです。

4

8 に答える 8

91

浮いて中央に配置される要素が ... であると仮定divします。id="content"

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

そして、次のCSSを適用します。

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

これに関する良い参考資料があります。

于 2009-08-05T10:06:50.893 に答える
75 
.center {
  display: table;
  margin: auto;
}
于 2012-04-10T22:54:48.473 に答える
5

これは、id = コンテナー (外側の div) と id = 含まれている (内側の div) の場合にうまく機能します。強く推奨される解決策の問題点は、ブラウザーが left: -50% 属性に対応しようとすると、場合によっては水平スクロール バーが表示されることです。このソリューションに は良いリファレンスがあります

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }
于 2014-11-24T11:47:08.303 に答える
4

DIV水平方向の中央に配置したいものがあるとします。

 <div id="foo">Lorem ipsum</div>

CSSでは、次のようにスタイルを設定します。

#foo
{
  margin:0 auto; 
  width:30%;
}

これは、上下のマージンがゼロピクセルであり、左または右のいずれかで、均等にするために必要な量を自動的に計算することを示しています。

幅が100％でない限り、幅に何を入れてもかまいません。そうでなければ、あなたは何にも中心を設定しないでしょう。

しかし、それを左または右にフロートさせると、ページ上の要素の通常の流れからそれが引き出され、自動マージン設定が機能しないため、賭けはオフになります。

于 2009-08-05T09:31:43.367 に答える
4

ここでの一般的な回答は機能する場合もありますが、対処が難しい水平スクロール バーが作成される場合もあります。特に、幅の広い水平ナビゲーションや大きなプルダウン メニューを扱う場合はそうです。これらのエッジケースを回避するのに役立つさらに軽量のバージョンを次に示します。

#wrap {
    float: right;
    position: relative;
    left: -50%;
}
#content {
    left: 50%;
    position: relative;
}

効いている証拠！

あなたの質問にもっと具体的に答えるために、いくつかの包含要素を設定せずに行うことはおそらく不可能ですが、幅の値を指定せずに行うことは非常に可能です。誰かが頭痛の種を救うことを願っています!

于 2014-04-15T21:49:20.090 に答える
1

display: inline blockand aligntoしか使えないのcenter？

例。

于 2011-05-07T19:46:44.597 に答える