如何在父div中水平居中三个div？ [英] How to center three divs horizontally within a parent div?

问题描述

我知道这个问题经常被问到，但我似乎永远无法得到它的工作。你能告诉我什么是错的吗？

我在一个#container div中有三个div，我想要并排居中。 #container是1000px宽（我想保持这种方式）。这是我的代码：

#container {margin-top：500px;位置：绝对; width：1000px;}。related-article {background-color：＃D6A400;显示：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;颜色：＃f1f1f1; font-family：亚伯，serif; margin-bottom：none;} a {text-decoration：none;}＃right {float：right;}＃left {float：left;}＃center {margin-left：385px; margin-right：385px;}

< div id = 容器 > < h2>以下是您要做的事！< / h2> < div id =left> < a href =＃class =相关文章第一align =middle> < img src =download.jpegalt =T-rex> < h3>构建你从未梦想过的令人惊叹的化石< / h3> < / A> < / DIV> < div id =center> < a href =＃class =related-article secondalign =middle> < img src =fossil-fish-10-lg.jpgalt =Fish> < h3>研究古代海洋生物学< / h3> < / A> < / DIV> < div id =right> < a href =＃class =related-article thirdalign =middle> < img src =fossil.turtle2.jpgalt =Turtle> < h3>揭开世界最伟大的奥秘< / h3> < / A> < / div>< / div>

$ b

非常感谢。

解决方案

您可以使用flexbox来做到这一点：



  #container {/ * margin-top：500px; * / width：1000px; margin：0 auto;}。related-article {background-color：＃D6A400;显示：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;颜色：＃f1f1f1; font-family：亚伯，serif; margin-bottom：none;} a {text-decoration：none;}}＃容器{width：1000px;}。related-article {background-color：＃D6A400;显示：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;颜色：＃f1f1f1; font-family：亚伯，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 = 容器 > < h2>以下是您要做的事！< / h2> < div class =flex-container> < div id =leftclass =box> < a href =＃class =相关文章第一align =middle> < img src =download.jpegalt =T-rex> < h3>构建你从未梦想过的令人惊叹的化石< / h3> < / A> < / DIV> < div id =centerclass =box> < a href =＃class =related-article secondalign =middle> < img src =fossil-fish-10-lg.jpgalt =Fish> < h3>研究古代海洋生物学< / h3> < / A> < / DIV> < div id =rightclass =box> < a href =＃class =related-article thirdalign =middle> < img src =fossil.turtle2.jpgalt =Turtle> < h3>揭开世界最伟大的奥秘< / h3> < / A> < / DIV> < / DIV> < / div>

I know this question has been frequently asked but I can never seem to get it to work. Can you tell me what's wrong?

I have three divs within a #container div, which I want to centre side by side. The #container is 1000px wide (I want to keep it that way). Here is my code:

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

All help would be gladly appreciated.

解决方案

You can do that quite simple using flexbox:

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

这篇关于如何在父div中水平居中三个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！