我有一个包含 9 个 div 的容器 div。我遇到的问题是在容器 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>
样式.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;
}
谢谢。
最佳答案
margin: auto
不会将元素内的内容居中,它(有时)会将元素本身居中。如果你想在容器内居中放置 div
,将 .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>
关于html - 在容器 div 中居中 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28568163/