web-dev-qa-db-ja.com

右に浮かぶものと左に浮かぶものの間のdivを中央に配置する

ヘッダーが3つのdivで構成されるページがあります。1つは左に、1つは右に、もう1つはその間にあります。中央のdivを中央に配置したいのですが、残念ながらfloat: centerは存在せず、ウィンドウサイズに応じて変更する必要があるため、左にフロートしてパディングを追加することはできません。

見落としているシンプルなものはありますか？または、どのように私はそのようなことをしますか？

更新：
さらに、中央のdivを中央に配置する方法を見つけたい div間のスペースで それが良く見える場合に。

htmlcsscenter
56
Mala

2つの浮動divがある場合、マージンがわかります。問題は、float:right divは、中央のdivの前に配置する必要があります。したがって、基本的には次のようになります。

左浮き|右浮き|中心に

さて、マージンについて：通常はmargin:0 auto、 右？問題は、マージンの値を知っていることです：フローティングdiv！だからあなただけを使用する必要があります：

margin:0 right-floated-width 0 left-floated-width

それはうまくいくはずです。

数年後に編集

一方、新しいおもちゃが町にあります：フレックスボックス。サポートは かなり良い です（つまり、IE 10）より低い値をサポートする必要がない場合、使いやすさは浮動小数点数よりもはるかに高くなります。

非常に良いflexboxガイド ここ を見ることができます。必要な例は正しい ここ です。

59
Ionuț Staicu

確かに、重要な部分は、中央のdivがマークアップの左右のdivの後に来るafterであるということです。この例をご覧ください。margin-left: autoおよびmargin-right: auto中央のdivで、中央に配置されます。

<html>
<head>
    <style type="text/css">
        #left
        {
            float: left;
            border: solid 1px red;
        }

        #mid
        {
            margin-left: auto;
            margin-right: auto;
            border: solid 1px red;
        }

        #right
        {
            float: right;
            border: solid 1px red;
        }
    </style>
</head>

<body>
    <div id="left">
        left
    </div>

    <div id="right">
        right
    </div>

    <div id="mid">
        mid
    </div>
</body>
</html>

テストするJS Binは次のとおりです。 http://jsbin.com/agewes/1/edit

42
Samuel Meacham

通常、floatの代わりにflexboxを使用できます。

https://jsfiddle.net/h0zaf4Lp/

HTML：

<div class="container">
    <div>left</div>
    <div class="center">center</div>
    <div>right</div>
</div>

CSS：

.container {
   display: flex;
}

.center {
    flex-grow: 1;
}
6
Leo

中央揃えのコンテンツを持つ要素は、両方の浮動要素を指定する必要がありますafter。その後、中央の要素をtext-align: centerに設定するだけです。中央の要素のテキストは、フロートの間に挟まれます。

こちらをご覧ください： http://jsfiddle.net/calvintennant/wjjeR/

4
calvintennant

これを試してください（より良いクラス名を使用してください）：

.left {
 float:left;
 width:200px;
}
.right{
 float:right;
 width:200px;
}
.center {
 overflow:hidden;
 zoom:1;
}

中央のdivは2つのフロートの間に収まります。
中央のdivと2つのフロートの間にガターを作成する場合は、中央のdivではなく、フロートのマージンを使用します。

「ズーム」のため、CSSは検証されませんが、そのレイアウトはIE 5.5および6。

ここではソースの順序が重要であることに注意してください。2つのフロートが最初に来てから、「中央」のdivになる必要があります。

2
Thierry Koblentz

場合によっては、制限があり、右フローティングdivの後に中央divを移動してページマークアップを変更できないことがあります。その場合は、次の指示に従ってください。

  1. コンテナの場合：position: relative
  2. 中央のdivの場合：position: absolute; left: [containerWidth - middle-width / 2]

あなたがアイデアを得たことを願っています。

0
Tengiz