web-dev-qa-db-ja.com

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

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

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

csscss-floatpositioningcenteringvariable-width
56
Waleed Eissa

フロートされて中央に配置される要素は、id="content"を持つdivであると仮定します...

<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%;
}

ここに良い reference があります。

89
Leyu
.center {
  display: table;
  margin: auto;
}
65
user1325255

widthにはfit-content値を使用できます。

#wrap {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;   
}

注：最新のブラウザでのみ機能します。

4
Fizer Khan

水平方向に中央揃えしたいDIVがあるとします：

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

CSSでは、これでスタイルを設定します。

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

上と下のマージンがゼロピクセルであり、左右どちらかで、どれだけ均等にする必要があるかを自動的に判断します。

幅が100％でない限り、幅に何を入れてもかまいません。そうでなければ、何にも中心を置くことはないでしょう。

ただし、左または右にフロートすると、ページ上の要素の通常のフローから外れてしまい、自動マージン設定が機能しなくなるため、ベットはオフになります。

4
random

これは、id = container（外側のdiv）およびid = contains（内側のdiv）の場合に機能します。強く推奨される解決策の問題は、ブラウザがleft：-50％属性に対応しようとしているときに、場合によっては水平スクロールバーになることです。 適切なリファレンスがあります このソリューションの場合

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }
4
Vianney Sserwanga

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

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

動作している証拠！

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

4
fohryan

display: inline blockとalignをcenterに使用することはできませんか？

例 。

1
Kai