Question

我正在尝试将文本居中放置在每个图像下方以及每个图像下方，我希望按钮居中。我一直在使用填充和边距来尝试解决我的问题，但是它不起作用。另外，我是否正确使用了button和figcaption标签？

    figure img {
      border: 10px solid #a8eb6c;
      height: 30%;
      width: 30%;
      float: left;
      display: inline-block;
      margin: 0 16px 0 0;
    }

    figure figcaption {
      display: inline-block;
      float: left;
    }

    figcaption {
      font-size: 17px;
      margin: 30px 110px 30px 60px;
    }

    figure button {
      background-color: #a8eb6c;
      display: inline-block;
      margin: 0 110px 30px 60px;
    }

<figure>
            <img src="img/drawstring-bag.jpg" alt="drawstring-bag">
            <img src="img/charm-necklace.jpg" alt="icecream-necklace">
            <img src="img/phone-case.jpg" alt="phone-case">
              <figcaption>Purses • Tops • Skirts</figcaption>
              <figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
              <figcaption>Scarves • Mittens • Plushies</figcaption>
              <button role="button">Sensational Sewing</button>
              <button role="button">Creative Charms</button>
              <button role="button">Knockout Knitting</button>
          </figure>
      </div>
    </main>

Answer 1

您本来就很亲密，但是您需要使每个“卡”都有其自己的容器。因此，您需要3个figure标签，每个标签包含一个img，一个figcaption和一个button。您可以轻松地使用div标记来完成此操作，但是figure和figcaption会提供语义代码。以后，您随时可以将这组figures放在div容器中，具体取决于您的使用方式。

figure {
    text-align: center;
    width: 20%;
    float: left;
}

img {
    max-width: 100px;
    border: 10px solid #a8eb6c
}

<figure>
    <img src="https://www.totallypromotional.com/media/totallypromotional/images/items/TDB100/product/jpg/Polypropylene-Drawstring-Bag-TDB100-red.jpg" alt="drawstring-bag">
    <figcaption>Purses • Tops • Skirts</figcaption>
    <button role="button">Sensational Sewing</button>
</figure>
<figure>
    <img src="https://cdn11.bigcommerce.com/s-zt9cwiz411/images/stencil/1280x1280/products/2076/5316/avalon_personalized_charm_necklace__39075.1508947216.jpg?c=2&imbypass=on" alt="icecream-necklace">
    <figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
    <button role="button">Creative Charms</button>
</figure>
<figure>
    <img src="https://dimg.dillards.com/is/image/DillardsZoom/zoom/kate-spade-new-york-glitter-ombre-dot-iphone-case/05482185_zi_pink_multicolor.jpg" alt="phone-case">
    <figcaption>Scarves • Mittens • Plushies</figcaption>
    <button role="button">Knockout Knitting</button>
</figure>

Answer 2

包装您想要对齐的内容。我将它们包装在<div>中，并在text-align:center中应用了<div>。

.centerContent {
  text-align: center;
  vertical-align: top;
}

figure {
  display: inline-block;
}

figure .centerContent {
  width: 28%;
  display: inline-block;
}

figure div img {
  border: 10px solid #a8eb6c;
  height: 90%;
  width: 90%;
}

figcaption {
}

figure div button {
  background-color: #a8eb6c;
}

<div class="centerContent">
  <figure>
    <div class="centerContent">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
      <figcaption>Purses • Tops • Skirts</figcaption>
      <button role="button">Sensational Sewing</button>
    </div>
    <div class="centerContent">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
      <figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
      <button role="button">Creative Charms</button>
    </div>
    <div class="centerContent">
      <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="drawstring-bag">
      <figcaption>Scarves • Mittens • Plushies</figcaption>
      <button role="button">Knockout Knitting</button>
    </div>
  </figure>
</div>

此外，我想建议您看看Bootstrap。您可能会发现它很有帮助。

希望这会有所帮助，

Answer 3

我希望这会有所帮助！我用过flex并在每个元素周围都包裹了一个div

    figure img {
      border: 10px solid #a8eb6c;
      height: 30%;
      width: 30%;
      display: inline-block;
      margin: 0 16px 0 0;
      text-align: center;
    }

    figure figcaption {
      display: inline-block;
      text-align: center;
    }

    figcaption {
      font-size: 17px;
      margin: 30px 110px 30px 60px;
    }

    figure button {
      background-color: #a8eb6c;
      display: inline-block;
      margin: 0 110px 30px 60px;
    }
    .container{
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-content: center;
    }
    .center{
     text-align: center;
    }
    .main_container{
      display: flex;
      justify-content: center;
     align-content: center;
     }

<figure>
     <div class="main_container">
        <div class="container">
            <div class="center"><img src="img/drawstring-bag.jpg" alt="drawstring-bag"></div>
              <div class="center"><figcaption>Purses • Tops • Skirts</figcaption></div>
              <div class="center"><button role="button">Sensational Sewing</button></div>
        </div>
        <div class="container">
            <div class="center"><img src="img/charm-necklace.jpg" alt="icecream-necklace"></div>
              <div class="center"><figcaption>Earrings • Pendants • Clay Necklaces</figcaption></div>
              <div class="center"><button role="button">Creative Charms</button></div>
        </div>
        <div class="container">
            <div class="center"><img src="img/phone-case.jpg" alt="phone-case"></div>
              <div class="center"><figcaption>Scarves • Mittens • Plushies</figcaption></div>
              <div class="center"><button role="button">Knockout Knitting</button></div>
        </div>

      </div>
</figure>
</main>

在图像下居中放置文字和按钮

3 个答案: