将图像下方的文本和按钮居中

Question

我试图将文本置于每个图像下方的中心，并且每个图像下方都希望按钮居中。我一直在使用填充和边距来尝试解决我的问题，但它不起作用。另外，我正确使用按钮和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>