0
我制作了一幅网格状图案，并带有9张图片，并且希望将9张图片作为整体居中。我用边距实现了网格状结构。我遇到的问题是当我做margin: auto和width: 100%时，它们再次变成block元素，而不是像以前那样的inline-block元素。居中一个div但保持网格状布局
这里是我想为中心的代码：（点击 “全页” 上看到这样的布局网格）
.content {
width: 100%;
}
.titletext {
margin: 0px;
padding: 0px;
}
.title {
font-family: "Fjalla One";
text-align: center;
color: #560606;
font-size: 100px;
margin: 10px 50px;
}
.subtitle {
font-family: "Fjalla One";
text-align: center;
color: #BF1C1C;
font-size: 40px;
margin: 5px 50px
}
.leftcorner {
width: 180px;
height: 55px;
position: relative;
left: 10px;
font-family: lato;
font-size: 20px;
color: #A81C1C;
top: -10px;
}
.title,
.subtitle {
position: relative;
top: -80px;
}
.rightcorner {
width: 400px;
height: 55px;
position: absolute;
right: 10px;
font-family: lato;
font-size: 20px;
color: #A81C1C;
top: 355px;
float: right;
text-align: right;
}
.products {
position: absolute;
}
.images {
width: 225px;
height: 225px;
margin: 0px 150px;
border: 13px solid #390404;
border-radius: 20px;
}
.strawberrycream,
.vanilladelight,
.greenlight,
.originalchoc,
.unicorn,
.americafresh,
.thegoat,
.buttermilk,
.oreo {
display: inline-block;
text-align: center;
}
.greenlight,
.americafresh,
.oreo {
margin-right: 0px;
}
.strawberrycream,
.thegoat,
.originalchoc {
margin-left: 0px;
}
.subtext {
font-size: 30px;
font-family: "Lato";
color: #560606;
margin-bottom: -15px;
margin-top: 5px;
}
.price {
font-size: 20px;
font-family: "Lato";
color: #900B0B;
margin-bottom: 80px;
}<html>
<head>
<title>Cupcakes</title>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="titletext">
<p class="leftcorner">Great for home snacks and parties!</p>
<p class="rightcorner">*All prices listed in dozens.</p>
<h1 class="title">Cupcakes</h1>
<h2 class="subtitle">Our great selection of hand-crafted cupcakes!</h2>
</div>
<div class="products">
<div class="strawberrycream">
<img class="images" src="Pictures/strawberrycream.jpg">
<p class="subtext">Strawberry Cream</p>
<p class="price">$24.99</p>
</div>
<div class="vanilladelight">
<img class="images" src="Pictures/vanilladelight.jpeg">
<p class="subtext">Vanilla Delight</p>
<p class="price">$16.99</p>
</div>
<div class="greenlight">
<img class="images" src="Pictures/greenlight.jpg">
<p class="subtext">Green Light</p>
<p class="price">$27.99</p>
</div>
<div class="originalchoc">
<img class="images" src="Pictures/OriginalChoc.jpg">
<p class="subtext">Original Choc'</p>
<p class="price">$16.99</p>
</div>
<div class="unicorn">
<img class="images" src="Pictures/unicorn.jpg">
<p class="subtext">Unicorn</p>
<p class="price">$27.99</p>
</div>
<div class="americafresh">
<img class="images" src="Pictures/americafresh.jpg">
<p class="subtext">America Fresh</p>
<p class="price">$24.99</p>
</div>
<div class="thegoat">
<img class="images" src="Pictures/TheGOAT.jpg">
<p class="subtext">The G.O.A.T.</p>
<p class="price">$29.99</p>
</div>
<div class="buttermilk">
<img class="images" src="Pictures/Buttermilk.jpg">
<p class="subtext">Buttermilk</p>
<p class="price">$19.99</p>
</div>
<div class="oreo">
<img class="images" src="Pictures/oreo.jpg">
<p class="subtext">Oreo</p>
<p class="price">$26.99</p>
</div>
</div>
</div>
</body>
</html>感谢。