Question

我制作了一个有9张图片的网格状图案，并希望将9张图片作为一个整体居中。我实现了带边距的网格状结构。我遇到的问题是当我执行margin: auto和width: 100%时，它们再次成为block个元素，而不是像以前那样的inline-block元素。

以下是我想要居中的代码:(点击“整页”以查看网格布局）

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

感谢。

Answer 1

这是你在找什么？您可以添加媒体查询，以在屏幕达到特定大小时更改框的宽度。

＆＃13;

.content {
  width: 100%;
}

.titletext {
  margin: 0px;
  padding: 0px;
  display:block;
}

.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: 200px;
  text-align:right;
}

.products {
  position: absolute;
}

.images {
  width: 225px;
  height: 225px;
  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;
}
.box{
  width:33%;
  text-align:center;
}

＆＃13;

<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 box">
        <img class="images" src="Pictures/strawberrycream.jpg">
        <p class="subtext">Strawberry Cream</p>
        <p class="price">$24.99</p>
      </div>
      <div class="vanilladelight box">
        <img class="images" src="Pictures/vanilladelight.jpeg">
        <p class="subtext">Vanilla Delight</p>
        <p class="price">$16.99</p>
      </div>
      <div class="greenlight box">
        <img class="images" src="Pictures/greenlight.jpg">
        <p class="subtext">Green Light</p>
        <p class="price">$27.99</p>
      </div>
      <div class="originalchoc box">
        <img class="images" src="Pictures/OriginalChoc.jpg">
        <p class="subtext">Original Choc'</p>
        <p class="price">$16.99</p>
      </div>
      <div class="unicorn box">
        <img class="images" src="Pictures/unicorn.jpg">
        <p class="subtext">Unicorn</p>
        <p class="price">$27.99</p>
      </div>
      <div class="americafresh box">
        <img class="images" src="Pictures/americafresh.jpg">
        <p class="subtext">America Fresh</p>
        <p class="price">$24.99</p>
      </div>
      <div class="thegoat box">
        <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 box">
        <img class="images" src="Pictures/Buttermilk.jpg">
        <p class="subtext">Buttermilk</p>
        <p class="price">$19.99</p>
      </div>
      <div class="oreo box">
        <img class="images" src="Pictures/oreo.jpg">
        <p class="subtext">Oreo</p>
        <p class="price">$26.99</p>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

将div居中，但保持网格状布局

1 个答案: