在容器 div 中居中 divs

Question

我有一个容器 div 可以容纳 9 divs。我遇到的问题是在容器 div 中将这 9 个 div 居中。我试过使用 margin: 0 auto; 但无济于事。

如有任何帮助，我们将不胜感激。

index.html

<div id="container">

     <!-- 1st row of images in menu -->

    <div class="square imgcentre"><img id="bbqChickenBurger" src="images/bbqChickenBurger.jpg" width="260" height="212" alt="BBQ Chicken Burger and Chips" /></div>
    <div class="square imgcentre"><img id="vegePizza" src="images/vegePizza.jpg" width="260" height="212" alt="Vegetarian Pizza" /></div>
    <div class="square imgcentre"><img id="parmaHamBaguette" src="images/parmaHamBaguette.jpg" width="260" height="212" alt="Parma Ham Baguette" /></div>

    <!-- 2nd row of images in menu -->

    <div class="square imgcentre"><img id="spaghettiBolognese" src="images/spaghettiBolognese.jpg" width="260" height="212" alt="Spaghetti Bolognese" /></div>
    <div class="square imgcentre"><img id="chiliCottageCheeseWrap" src="images/chiliCottageCheeseWrap.jpg" width="260" height="212" alt="Chili Cottage Cheese Wrap" /></div>
    <div class="square imgcentre"><img id="chickenSalad" src="images/chickenSalad.jpg" width="260" height="212" alt="Chicken Salad" /></div>

    <!-- 3rd row of images in menu -->

    <div class="square imgcentre"><img id="brownieBite" src="images/brownieBite.jpg" width="260" height="212" alt="Brownie Bite with Vanilla Ice Cream" /></div>
    <div class="square imgcentre"><img id="strawberrySundae" src="images/strawberrySundae.jpg" width="260" height="212" alt="Strawberry Sundae" /></div>
    <div class="square imgcentre"><img id="cheesecake" src="images/cheesecake.jpg" width="260" height="212" alt="Cheesecake" /></div>

    </div>

style.css

#container{
    width: 1200px;
    margin: 0 auto;
    height: 790px;
    border-bottom:solid 2px #d8d8d8;
}

.square {
    float:left;
    position: relative;
    width:30%;
    padding-bottom :17px; 
    margin:1.66%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    border:solid 2px;

}

.imgcentre{
    text-align: center;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

谢谢。

Answer 1

包装所有子 div 的，如下所示：

#container {
  width: 1200px;
  margin: 0 auto;
  height: 790px;
  border-bottom: solid 2px #d8d8d8;
}
.square {
  float: left;
  position: relative;
  width: 30%;
  padding-bottom: 17px;
  margin: 1.66%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  border: solid 2px;
}
.imgcentre {
  text-align: center;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
}
.holder {
  width: 80%;
  height: 80%;
  margin: 0 auto;
}

<div id="container">
  <div class="holder">
    <!-- 1st row of images in menu -->

    <div class="square imgcentre">
      <img id="bbqChickenBurger" src="images/bbqChickenBurger.jpg" width="260" height="212" alt="BBQ Chicken Burger and Chips" />
    </div>
    <div class="square imgcentre">
      <img id="vegePizza" src="images/vegePizza.jpg" width="260" height="212" alt="Vegetarian Pizza" />
    </div>
    <div class="square imgcentre">
      <img id="parmaHamBaguette" src="images/parmaHamBaguette.jpg" width="260" height="212" alt="Parma Ham Baguette" />
    </div>

    <!-- 2nd row of images in menu -->

    <div class="square imgcentre">
      <img id="spaghettiBolognese" src="images/spaghettiBolognese.jpg" width="260" height="212" alt="Spaghetti Bolognese" />
    </div>
    <div class="square imgcentre">
      <img id="chiliCottageCheeseWrap" src="images/chiliCottageCheeseWrap.jpg" width="260" height="212" alt="Chili Cottage Cheese Wrap" />
    </div>
    <div class="square imgcentre">
      <img id="chickenSalad" src="images/chickenSalad.jpg" width="260" height="212" alt="Chicken Salad" />
    </div>

    <!-- 3rd row of images in menu -->

    <div class="square imgcentre">
      <img id="brownieBite" src="images/brownieBite.jpg" width="260" height="212" alt="Brownie Bite with Vanilla Ice Cream" />
    </div>
    <div class="square imgcentre">
      <img id="strawberrySundae" src="images/strawberrySundae.jpg" width="260" height="212" alt="Strawberry Sundae" />
    </div>
    <div class="square imgcentre">
      <img id="cheesecake" src="images/cheesecake.jpg" width="260" height="212" alt="Cheesecake" />
    </div>
  </div>
</div>

希望对您有所帮助。

Answer 2

margin: auto 不会将元素内的内容居中，它（有时）会将元素本身居中。如果您想将 divs 在容器内居中，请将 .square 上的 float: left 替换为 display: inline-block，然后将 text-align: center 应用于容器。

#container{
    width: 1200px;
    margin: 0 auto;
    height: 790px;
    border-bottom: solid 2px #d8d8d8;
    text-align: center
}

.square {
    position: relative;
    width:30%;
    padding-bottom :17px; 
    margin:1.66%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    border:solid 2px;
    display: inline-block

}

.imgcentre{
    text-align: center;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
}

<div id="container">

     <!-- 1st row of images in menu -->

    <div class="square imgcentre"><img id="bbqChickenBurger" src="images/bbqChickenBurger.jpg" width="260" height="212" alt="BBQ Chicken Burger and Chips" /></div>
    <div class="square imgcentre"><img id="vegePizza" src="images/vegePizza.jpg" width="260" height="212" alt="Vegetarian Pizza" /></div>
    <div class="square imgcentre"><img id="parmaHamBaguette" src="images/parmaHamBaguette.jpg" width="260" height="212" alt="Parma Ham Baguette" /></div>

    <!-- 2nd row of images in menu -->

    <div class="square imgcentre"><img id="spaghettiBolognese" src="images/spaghettiBolognese.jpg" width="260" height="212" alt="Spaghetti Bolognese" /></div>
    <div class="square imgcentre"><img id="chiliCottageCheeseWrap" src="images/chiliCottageCheeseWrap.jpg" width="260" height="212" alt="Chili Cottage Cheese Wrap" /></div>
    <div class="square imgcentre"><img id="chickenSalad" src="images/chickenSalad.jpg" width="260" height="212" alt="Chicken Salad" /></div>

    <!-- 3rd row of images in menu -->

    <div class="square imgcentre"><img id="brownieBite" src="images/brownieBite.jpg" width="260" height="212" alt="Brownie Bite with Vanilla Ice Cream" /></div>
    <div class="square imgcentre"><img id="strawberrySundae" src="images/strawberrySundae.jpg" width="260" height="212" alt="Strawberry Sundae" /></div>
    <div class="square imgcentre"><img id="cheesecake" src="images/cheesecake.jpg" width="260" height="212" alt="Cheesecake" /></div>

    </div>

在容器 div 中居中 divs

Centering divs in a container div

html

css

center

margin