1. ホーム
  2. 質問と答え
  3. 親div内で水平に3つのdivを中央に配置するにはどうすればよいですか？

親div内で水平に3つのdivを中央に配置するにはどうすればよいですか？

2016-06-15 7 views
11

私はこの質問が頻繁に尋ねられていることを知っていますが、私はそれを働かせることはできません。何が間違っているのか教えていただけますか？親div内で水平に3つのdivを中央に配置するにはどうすればよいですか？

#container div内に3つのdivがありますが、これは並べて配置したいものです。 ＃コンテナの幅は1000pxです（このままにしておきたい）。ここに私のコードは次のとおりです。

#container { 
 
    margin-top: 500px; 
 
    position: absolute; 
 
    width: 1000px; 
 
} 
 
.related-article { 
 
    background-color: #D6A400; 
 
    display: inline-block; 
 
    width: 230px; 
 
    height: 300px; 
 
    border-radius: 30px; 
 
    margin-bottom: 0px; 
 
} 
 
.related-article > img { 
 
    width: 200px; 
 
    height: 150px; 
 
    border-radius: 15px; 
 
    margin-top: 15px; 
 
} 
 
.related-article > h3 { 
 
    font-size: 15px; 
 
    width: 180px; 
 
    text-align: justify; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: #f1f1f1; 
 
    font-family: Abel, serif; 
 
    margin-bottom: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
#right { 
 
    float: right; 
 
} 
 
#left { 
 
    float: left; 
 
} 
 
#center { 
 
    margin-left: 385px; 
 
    margin-right: 385px; 
 
}
<div id="container"> 
 
    <h2>Here's what you'll do!</h2> 
 
    <div id="left"> 
 
    <a href="#" class="related-article first" align="middle"> 
 
     <img src="download.jpeg" alt="T-rex"> 
 
     <h3>Constructing amazing fossils you never even dreamed of</h3> 
 
    </a> 
 
    </div> 
 
    <div id="center"> 
 
    <a href="#" class="related-article second" align="middle"> 
 
     <img src="fossil-fish-10-lg.jpg" alt="Fish"> 
 
     <h3>Studying ancient marine biology</h3> 
 
    </a> 
 
    </div> 
 
    <div id="right"> 
 
    <a href="#" class="related-article third" align="middle"> 
 
     <img src="fossil.turtle2.jpg" alt="Turtle"> 
 
     <h3>Uncovering the world's greatest mysteries</h3> 
 
    </a> 
 
    </div> 
 
</div>

すべてのヘルプは喜んでいただければ幸いです。

出典

2016-06-15 nil338

答えて

6

あなたはフレキシボックス使用して、非常に簡単なことを行うことができます：あなたはそのためのdisplay:tableを使用することができ

#container { 
 
/*  margin-top: 500px; */ 
 
    width: 1000px; 
 
    margin: 0 auto; 
 
} 
 
.related-article { 
 
    background-color: #D6A400; 
 
    display: inline-block; 
 
    border-radius: 30px; 
 
    margin-bottom: 0px; 
 
} 
 
.related-article > img { 
 
    width: 200px; 
 
    height: 150px; 
 
    border-radius: 15px; 
 
    margin-top: 15px; 
 
} 
 
.related-article > h3 { 
 
    font-size: 15px; 
 
    width: 180px; 
 
    text-align: justify; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: #f1f1f1; 
 
    font-family: Abel, serif; 
 
    margin-bottom: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 

 
} 
 
#container { 
 
    width: 1000px; 
 
} 
 

 
.related-article { 
 
    background-color: #D6A400; 
 
    display: inline-block; 
 
    width: 230px; 
 
    height: 300px; 
 
    border-radius: 30px; 
 
    margin-bottom: 0px; 
 
} 
 
.related-article > img { 
 
    width: 200px; 
 
    height: 150px; 
 
    border-radius: 15px; 
 
    margin-top: 15px; 
 
} 
 
.related-article > h3 { 
 
    font-size: 15px; 
 
    width: 180px; 
 
    text-align: justify; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: #f1f1f1; 
 
    font-family: Abel, serif; 
 
    margin-bottom: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
.box { 
 
    margin-right: 10px; 
 
    width: 230px; 
 
    height: 300px; 
 
    } 
 

 
.flex-container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}
<div id="container"> 
 
     <h2>Here's what you'll do!</h2> 
 
     <div class="flex-container"> 
 
     <div id="left" class="box"> 
 
      <a href="#" class="related-article first" align="middle"> 
 
      <img src="download.jpeg" alt="T-rex"> 
 
      <h3>Constructing amazing fossils you never even dreamed of</h3> 
 
      </a> 
 
      </div> 
 
      <div id="center" class="box"> 
 
      <a href="#" class="related-article second" align="middle"> 
 
      <img src="fossil-fish-10-lg.jpg" alt="Fish"> 
 
      <h3>Studying ancient marine biology</h3> 
 
      </a> 
 
      </div> 
 
      <div id="right" class="box"> 
 
      <a href="#" class="related-article third" align="middle"> 
 
      <img src="fossil.turtle2.jpg" alt="Turtle"> 
 
      <h3>Uncovering the world's greatest mysteries</h3> 
 
      </a> 
 
      </div> 
 
      </div> 
 
     </div>

出典

2016-06-15 09:23:39

+0

それほど適切ではない、私はそれが画面の幅から出て行くことを意味します。 – Shadow

+1

私はちょうど横に中央に置いた、あなたはあなたが追加したいくつかのCSSスタイルを削除する必要があります。私はそれを修正させてください！ –

+0

:) thax btそれは私の質問mだけでもしようとしています。 – Shadow

1

floatを削除し、display: inline-blockをすべて3つに追加してから、text-align: center;をコンテナに追加します。

出典

2016-06-15 09:20:21 Johannes

+0

あなたは私の言葉をここに見ました。https://jsfiddle.net/jsusLxoy/ –

2

を...

あなたはスタイル

display:table
と親のdivを持つことができます

とあなたの3つのc display: flexを用いて溶液

display:table-cell 


#container { 
 
    margin-top: 500px; 
 
    position: absolute; 
 
    width: 1000px; 
 
} 
 
.related-article { 
 
    background-color: #D6A400; 
 
    display: inline-block; 
 
    width: 230px; 
 
    height: 300px; 
 
    border-radius: 30px; 
 
    margin-bottom: 0px; 
 
} 
 
.related-article > img { 
 
    width: 200px; 
 
    height: 150px; 
 
    border-radius: 15px; 
 
    margin-top: 15px; 
 
} 
 
.related-article > h3 { 
 
    font-size: 15px; 
 
    width: 180px; 
 
    text-align: justify; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: #f1f1f1; 
 
    font-family: Abel, serif; 
 
    margin-bottom: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
#container { 
 
    margin-top: 500px; 
 
    position: absolute; 
 
    width: 1000px; 
 
    display: table; 
 
} 
 
.related-article { 
 
    background-color: #D6A400; 
 
    display: inline-block; 
 
    width: 230px; 
 
    height: 300px; 
 
    border-radius: 30px; 
 
    margin-bottom: 0px; 
 
} 
 
.related-article > img { 
 
    width: 200px; 
 
    height: 150px; 
 
    border-radius: 15px; 
 
    margin-top: 15px; 
 
} 
 
.related-article > h3 { 
 
    font-size: 15px; 
 
    width: 180px; 
 
    text-align: justify; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: #f1f1f1; 
 
    font-family: Abel, serif; 
 
    margin-bottom: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
} 
 
#left, 
 
#right, 
 
#center { 
 
    display: table-cell; 
 
} 
 
#center { 
 
    margin-left: 385px; 
 
    margin-right: 385px; 
 
} 
 
h2 { 
 
    display: table-row; 
 
}
<div id="container"> 
 
    <h2>Here's what you'll do!</h2> 
 
    <div id="left"> 
 
    <a href="#" class="related-article first" align="middle"> 
 
     <img src="download.jpeg" alt="T-rex"> 
 
     <h3>Constructing amazing fossils you never even dreamed of</h3> 
 
    </a> 
 
    </div> 
 
    <div id="center"> 
 
    <a href="#" class="related-article second" align="middle"> 
 
     <img src="fossil-fish-10-lg.jpg" alt="Fish"> 
 
     <h3>Studying ancient marine biology</h3> 
 
    </a> 
 
    </div> 
 
    <div id="right"> 
 
    <a href="#" class="related-article third" align="middle"> 
 
     <img src="fossil.turtle2.jpg" alt="Turtle"> 
 
     <h3>Uncovering the world's greatest mysteries</h3> 
 
    </a> 
 
    </div> 
 
</div>

出典

2016-06-15 09:24:10

3

としてdivをヒルド。 here

  1. フレキシボックスについての詳細を読む左右中央にされるすべての子供のにflex: 1を追加コンテナ
  2. にdisplay: flexを適用します。

h2 { 
 
    margin-top: 500px; 
 
} 
 
#container { 
 
    position: absolute; 
 
    width: 1000px; 
 
    display: flex; 
 
    text-align: center; 
 
} 
 
#container div { 
 
    flex: 1; 
 
} 
 
.related-article { 
 
    background-color: #D6A400; 
 
    display: inline-block; 
 
    width: 230px; 
 
    height: 300px; 
 
    border-radius: 30px; 
 
    margin-bottom: 0px; 
 
} 
 
.related-article > img { 
 
    width: 200px; 
 
    height: 150px; 
 
    border-radius: 15px; 
 
    margin-top: 15px; 
 
} 
 
.related-article > h3 { 
 
    font-size: 15px; 
 
    width: 180px; 
 
    text-align: justify; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    color: #f1f1f1; 
 
    font-family: Abel, serif; 
 
    margin-bottom: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
}
<h2>Here's what you'll do!</h2> 
 
<div id="container"> 
 
    <div id="left"> 
 
    <a href="#" class="related-article first" align="middle"> 
 
     <img src="download.jpeg" alt="T-rex"> 
 
     <h3>Constructing amazing fossils you never even dreamed of</h3> 
 
    </a> 
 
    </div> 
 
    <div id="center"> 
 
    <a href="#" class="related-article second" align="middle"> 
 
     <img src="fossil-fish-10-lg.jpg" alt="Fish"> 
 
     <h3>Studying ancient marine biology</h3> 
 
    </a> 
 
    </div> 
 
    <div id="right"> 
 
    <a href="#" class="related-article third" align="middle"> 
 
     <img src="fossil.turtle2.jpg" alt="Turtle"> 
 
     <h3>Uncovering the world's greatest mysteries</h3> 
 
    </a> 
 
    </div> 
 
</div>

出典

2016-06-15 09:26:23 Pugazh

1

これを試してみてください、とフロートを追加：あなたの右、左と中央のdivにを去り、あなたの左余白と中央のdivの右を減らします。

#right { 
float: left; 
} 
#left { 
float: left; 
} 
#center { 
margin-left: 85px; 
margin-right: 85px; 
float:left; 
}

出典

2016-06-15 09:27:27 frnt

1

代わりに、中央、左右を追加します。 ulを使用し、liの幅をパーセンテージで設定します。それはコードを改善し、CSSコードを減らすでしょう。また、

display: inline-block;

：

codepen urlはhttp://codepen.io/SESN/pen/pbbjrb

CSS

#container { width: 100%; } 
.ulContainer { margin: 0px auto; list-style: none; width: 80%; } 
.ulContainer li { width: 33.33%; float: left; }

HTML

<div id="container"> 
     <h2>Here's what you'll do!</h2> 
    <ul class="ulContainer"> 
    <li> 
    <a href="#" class="related-article first" align="middle"> 
      <img src="download.jpeg" alt="T-rex"> 
      <h3>Constructing amazing fossils you never even dreamed of</h3> 
      </a> 
    </li> 
    <li> 
    <a href="#" class="related-article second" align="middle"> 
      <img src="fossil-fish-10-lg.jpg" alt="Fish"> 
      <h3>Studying ancient marine biology</h3> 
      </a> 
    </li> 
    <li> 
    <a href="#" class="related-article third" align="middle"> 
      <img src="fossil.turtle2.jpg" alt="Turtle"> 
      <h3>Uncovering the world's greatest mysteries</h3> 
      </a> 
    </li> 
    </ul> 
     </div>

出典

2016-06-15 09:31:59 SESN

3

は、すべての山車を削除し、それらを置き換えるです私が試みたのと同じくらい、divの間のスペースで、正しい方法で表示することはできません。 #left、#center、#right divの間のスペースを50ピクセル未満にするか、パーセンテージ（％）で作業します。

出典

2016-06-15 09:55:12 AlbanianGamerYT

関連する問題

 関連する問題