web-dev-qa-db-ja.com

他のdivの内側に3 div（左/中央/右）を揃える方法は？

コンテナdivの内側に3つのdivを配置したいのですが、これは次のようなものです。

[[LEFT]       [CENTER]        [RIGHT]]

コンテナdivは100％幅（設定幅なし）で、コンテナdivのサイズを変更した後も中央divは中央に留まるはずです。

だから私は設定：

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

しかしそれはなります：

[[LEFT]       [CENTER]              ]
                              [RIGHT]

任意のヒント？

htmlcssflexboxalignmentcss-float
356
serg

HTML構造を変更したくない場合は、ラッパー要素にtext-align: center;を、中央揃え要素にdisplay: inline-block;を追加することによっても変更できます。

#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/ /

118
fruechtemuesli

Flexboxを使用して3つのDIVを水平に並べる

これはdivを他のdivの内側に水平に揃えるためのCSS3メソッドです。

#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

flexboxの利点：

  1. 最小限のコード非常に効率的
  2. 縦横ともにセンタリングが簡単で簡単
  3. 同じ高さの列はシンプルで簡単です
  4. フレックス要素を整列させるための複数のオプション
  5. それは敏感です
  6. レイアウトを構築することを目的としていないためレイアウト容量が限られているフロートやテーブルとは異なり、flexboxは幅広い選択肢を持つ最新の（CSS3）手法です。

flexboxの詳細については、以下をご覧ください。

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

100
Michael_B

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プロパティは、前の要素の左に次の要素を追加します。rightと同じ場合

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

 <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>

[最初] [二番目]

[三番]

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

19
Rajiv Pingale

私はバーがタイトでダイナミックなのが好きです。これはCSS 3とHTML 5のためのものです

  1. まず、幅を100ピクセルに設定することは制限的です。しないでください。

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

  3. クラス（#container、#leftなど）の代わりにid（hash .container、.leftなど）を使用しているので、コード内の他の場所でスタイルパターンを繰り返したくない場合は問題ありません。代わりにクラスを使うことを考えます。

  4. HTMLの場合、left、center、＆rightの順番を入れ替える必要はありません。 display: inline-block;はこれを修正し、あなたのコードをきれいで論理的に正しい順序に戻します。

  5. 最後に、将来の<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; }
}
13
Eric Wanchic

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

01.テーブルトリックを使う 

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

02.フレックストリックの使い方 

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

03.フロートトリックを使う 

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
10
Santosh Khalse

これは、CSS3 Flexboxを使って簡単に行うことができます。これは、将来的に（<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 */
}

出力： 

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

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
8
Manoj Kumar

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>
4
Ka.

あなたがHTMLの順序を保ちたいがflexを使わないのなら、可能な答え。

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

コードペンリンク

3
Pruthvi P

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デモ

2
Khalid Farhan

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

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

1
user15100

Bootstrap 3 Iを使用して、同じ幅のdivを3つ作成します（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

1
mortalis

これを試すことができます：

このようなあなたの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]]
0
kishan Radadiya

これを私が中心要素として image を使用してこれを行ったときに私が受け入れられた答えに加えなければならなかった変更はここにあります：

  1. 画像がdiv（この場合は#center）で囲まれていることを確認してください。そうでない場合は、displayをblockに設定する必要があります。これは、浮動要素間のスペースを基準にして中央に配置されているように見えます。

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

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
0
Sam