Центрирование текста и кнопок под изображениями

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

Надеюсь, это поможет! Я использовал 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>

Answer 3

Оберните ваш контент, который вы хотите выровнять. Я завернул их в <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 . Вы можете найти это полезным.

Надеюсь, это поможет,