3つのdiv（左/中央/右）を別のdiv内に配置する方法は？

392

次のように、コンテナーdiv内に3つのdivを配置したいと思います。

[[LEFT]       [CENTER]        [RIGHT]]

コンテナーdivは100％幅（設定された幅なし）であり、コンテナーのサイズを変更した後、中央のdivは中央にとどまる必要があります。

だから私は設定しました：

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

しかし、次のようになります。

[[LEFT]       [CENTER]              ]
                              [RIGHT]

任意のヒント？

html  css  flexbox  alignment  css-float 
— Serg
ソース
1
コンテナーが300px幅より狭くなると、overflowプロパティを設定しない限り、それが起こります。
— inkedmn 2010
フレックスボックスとグリッド：jsfiddle.net/w0s4xmc0/12963
— Manoj Kumar
ただ、ノートに-各列のコンテンツの束とinkedmnさんのコメント@を1として、私はそれらすべてをせずに任意のコンテナの幅で適切に整列することができなかったoverflow: hidden;上のcenter列。次に、小さなデバイスのメディアクエリで、3つの列すべてをページの中央に配置した場合overflow: hidden;、中央の行（大きなデバイスでは右の列）が必要でした。そうしないと、高さがなく、垂直方向の中央に配置されません。一番上の行と一番下の行の間。
— クリスL

回答:

364

そのCSSで、divを次のように配置します（最初に浮動小数点数）：

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

PSあなたは右、左、そして中央に浮かぶこともできます。重要なことは、フロートが「メイン」の中央セクションの前に来ることです。

PPSあなたはしばしば#containerこのスニペットの中で最後にしたいと思います：<div style="clear:both;"></div>これは#container垂直に伸びて#center、両側からフロートを含むようにします。

— dkamins
ソース
コンテナが100％でない場合はどうしますか？ここでそのようなことを試みていますが、divはコンテナの右側に留まってほしいのですが、ページの右側に浮かんでいます
— Tiago
@Tiago：フロートがdiv内にある場合、フロートはdivに拘束されたままである必要があります。に設定して、コンテナの幅を確認しborder:solidます。100％の場合は、別のdivで囲んでページ内に配置します。
— ジェームズP.
また、これらをサイズ変更可能なコンテナ内に配置する場合は、コンテナの最小幅を設定して、右にフローティングされたdivが押し下げられないようにしてください。
— Tapefreak
6
この回答は6年以上前のものです。2016年の正解はflexboxです。
1
@torazaburo、おそらく1つ以上の正しい答えがあるかもしれません、同じ点に到達する多くの方法があります、この場合、私が使用するフレームワークはすでに要素にフロートで左右を設定しているので、私はこのソリューションを使用する必要があります最後に中心要素を追加するのは完璧です。
— Ninja Coding
128

HTML構造を変更したくない場合はtext-align: center;、wrapper要素に追加display: inline-block;し、中央の要素にa を追加することもできます。

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

ライブデモ：http : //jsfiddle.net/CH9K8/

— Früchtemuesli
ソース
1
これは、あまり早く折りたたむことなく、ウィンドウの幅に合わせて適切にサイズ変更する唯一のソリューションです。
— Jared Sealey 2013年
2
左と右のサイズが等しい場合に最適です。そうでない場合、センターは中央に配置されません。
— mortalis 2017
127

Flexboxを使用して3つのDivを水平に配置する

次のCSS3メソッドは、divを別のdivの内側に水平に配置します。

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
スニペットを展開

jsFiddle

justify-contentプロパティには、5つの値をとります。

  • flex-start （デフォルト）
  • flex-end
  • center
  • space-between
  • space-around

すべての場合において、3つのdivは同じ行にあります。各値の説明については、https：//stackoverflow.com/a/33856609/3597276を参照してください。

フレックスボックスの利点：

  1. 最小限のコード。非常に効率的
  2. 垂直方向と水平方向の両方でのセンタリングはシンプルで簡単です
  3. 高さが等しいカラムはシンプルで簡単です
  4. フレックス要素を揃えるための複数のオプション
  5. それは反応します
  6. フロートやテーブルはレイアウトを構築するためのものではなかったため、レイアウト容量が限られているのとは異なり、フレックスボックスは、幅広いオプションを備えた最新の（CSS3）テクニックです。

フレックスボックスの詳細については、以下をご覧ください。

ブラウザーサポート： Flexboxは、IE <10を除くすべての主要なブラウザーでサポートされています。Safari 8やIE10などの一部の最近のブラウザーバージョンでは、ベンダープレフィックスが必要です。接頭辞をすばやく追加するには、Autoprefixerを使用します。この回答の詳細。

— マイケル・ベンジャミン
ソース
7
フレックスはフロートを使用するよりもはるかに優れています。
— Faizan Akram Dar 2016
1
こことリンクされた投稿で素晴らしい説明があります！ 補足：コンテナーdiv内のフレックスアイテムとして「スパン」要素を使用すると、Firefoxでは機能しましたが、javafxベースのブラウザー（Webビュー）では機能しませんでした。「スパン」を「div」に変更すると、両方で機能しました。
— Ashok
Internet Explorer 10以前のバージョンは、justify-contentプロパティをサポートしていません
— D.Snap
1
残念ながら、これは同じ幅のアイテムでのみ機能します。参照してくださいstackoverflow.com/questions/32551291/...
— ハンドル
私はここですべての解決策を試しましたが、これは最高のものです！
— ニコミュラー
22

Floatプロパティは、実際にはテキストの整列には使用されません。

このプロパティは、要素を右または左または中央に追加するために使用されます。 

div > div { border: 1px solid black;}
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>
スニペットを展開

以下のためにfloat:left出力されます[First][second][Third]

以下のためにfloat:right出力されます[Third][Second][First]

つまり、float => leftプロパティは、次の要素を前の要素の左に追加します。右と同じ場合

また、親要素の幅を考慮する必要があります。子要素の幅の合計が親要素の幅を超える場合、次の要素が次の行に追加されます

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>
スニペットを展開

[最初] [2番目]

[第三]

したがって、完璧な結果を得るには、これらすべての側面を考慮する必要があります

— ラジブ・ピンガーレ
ソース
13

バーはタイトでダイナミックです。これはCSS 3とHTML 5用です

  1. まず、幅を100pxに設定するのは制限があります。しないでください。

  2. 次に、コンテナの幅を100％に設定しても、ナビゲーション全体やクレジット/著作権バーなど、アプリ全体のヘッダー/フッターバーであると説明されるまでは問題ありません。right: 0;そのシナリオでは代わりに使用してください。

  3. あなたは、IDの（ハッシュ使用している#container、#left代わりにクラス（の、など）.container、.leftあなたのコード内の他の場所で、あなたのスタイルパターンを繰り返したい場合を除き、大丈夫です、など）、。代わりにクラスを使用することを検討します。

  4. HTMLの場合、左、中央、右の順序を入れ替える必要はありません。display: inline-block;これを修正し、コードをよりクリーンで論理的な順序に戻します。

  5. 最後に、floatをすべてクリアして、futureを台無しにしないようにする必要があります<div>。あなたはこれでclear: both;

要約する：

HTML：

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

CSS：

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

HAMLおよびSASSを使用する場合のボーナスポイント;）

HAML：

.container
  .left
  .center
  .right
  .clear

SASS：

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}
— エリック・ワンチッチ
ソース
12

要素を整列させるために利用できるいくつかのトリックがあります。

01.テーブルトリックの使用

コードスニペットを表示

02. Flex Trickの使用

コードスニペットを表示

03. Float Trickの使用

コードスニペットを表示

— サントシュ・カルセ
ソース
11

これはCSS3フレックスボックスを使用して簡単に行うことができます。これは<IE9、ほとんどすべてのブラウザーで将来使用される機能（完全に停止した場合）です。

ブラウザ互換性テーブルを確認する

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

出力：

コードスニペットを表示

— マノジクマール
ソース
4

Twitterブートストラップ： 

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
— カー。
ソース
3

htmlの順序を維持し、フレックスを使用しない場合は、可能な答え。

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

コードペンリンク

— Pruthvi P
ソース
2

HTML：

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS：

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; 完璧な中央揃えを提供します。

JSFiddleデモ

— ハリド・ファルハン
ソース
テキスト要素がほぼ同じサイズで、1つのテキストを長くし、＃center divが中央にないため、例ではdivを中央に配置するだけです：jsfiddle.net/3a4Lx239
— Kai
1

私はこれを単純化し、コンテナーを必要とせずにそれを達成するためにもう一度試みました。

HTML 

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

JSFiddleでライブで見ることができます

— user15100
ソース
1

Bootstrap 3を使用して、同じ幅の3つのdivを作成します（12列のレイアウトでは、各divに4列）。このようにして、左右のセクションの幅が異なる場合でも中央ゾーンを中央に保つことができます（列のスペースからオーバーフローしない場合）。

HTML：

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS：

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

ライブラリなしでその構造を作成するために、Bootstrap CSSからいくつかのルールをコピーしました。

HTML：

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS：

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

— 死者
ソース
0

ここでは、画像を中心の要素としてこれを行ったときに、受け入れられた回答に加えなければならない変更があります。

  1. 画像がdivで囲まれていることを確認します（#centerこの場合）。そうでない場合は、に設定displayする必要がありblock、フローティングエレメント間のスペースを基準にして中央に配置されているようです。

  2. 画像とそのコンテナの両方のサイズを必ず設定してください。

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
— サム
ソース
0

あなたはこれを試すことができます：

このようなあなたのhtmlコード：

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

そしてあなたのCSSコードは次のようになります：

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

したがって、出力は次のようになります。

[[LEFT]       [CENTER]        [RIGHT]]
— キシャンラダディヤ
ソース
-1 
.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess
— シュバム
ソース
2
Stack Overflowへようこそ！このコードがOPに役立つ理由の説明を追加してください。これは、将来の視聴者が学ぶことができる答えを提供するのに役立ちます。詳細については、回答方法を参照してください。
— 異端者の猿
-3

あなたはそれを正しく行いました、あなたはあなたのフロートをクリアする必要があるだけです。追加するだけ 

overflow: auto;

あなたのコンテナクラスに。

— ムスタファゼガウラ
ソース
-6

最も簡単な解決策は、3つの列を持つテーブルを作成し、そのテーブルを中央に配置することです。

html：

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

css：

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}
— ステンビソ・F・マカティニ
ソース
-10 
#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
— バイト
ソース
2
コードのブロックを投稿するだけでなく、このコードが提起された問題を解決する理由を説明してください。説明がなければ、これは答えではありません。
— Martijn Pieters
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.