Как это сделать?

Question

[Виталий]

Хочу сделать вот так уже 2 день и ничего не помогает:, а получается вот так и не понимаю как это выравнять:
На всякий случай код
html:

<div id="help">
    <h1>Than you can help
        <br>our shelter</h1>
        <div id="content1">
          <div class="contents1">
              <img src="img/cat-food.png" alt="cat-food">
              <h3>Pet food</h3>
          </div>
          <div class="contents1">
              <img src="img/ambulance.png" alt="ambulance">
              <h3>Transportation</h3>
          </div>
          <div class="contents1">
              <img src="img/ball.png" alt="ball">
              <h3>Toys</h3>
          </div>
          <div class="contents1">
              <img src="img/bowl.png" alt="bowl">
              <h3>Bowls and caps</h3>
          </div>
          <div class="contents1">
              <img src="img/shampoo.png" alt="shampoo">
              <h3>Shampoos</h3>
          </div>
        </div>
  </div>

css:

#help{
  height: 590px;
  background-color: #fafafa;
}

#help h1{
  font-size: 35pt;
  color: #545454;
  font-weight: normal;
  margin-top: 80px;
  margin-left: 750px;
  position: absolute;
  text-align: center;
}

.contents1{
  height: 100px;
  width: 100px;
  margin-right: 100px;
  margin-top: 250px;
  /* background-color: red; */
}

#content1{
  display: flex;
  justify-content: center;
}

.contents1 h3{
  margin-top: 10px;
  /* margin-left: 30px; */
  font-family: Georgia serif;
  color: #545454;
  font-weight: normal;
  position: absolute;
}

.contents1 img{
  margin-left: 20px;

}

Answer 1

[Александр Маргинал]

Display flex, justify-content space around

Comments

[Александр Маргинал]

Если мой ответ помог вам, пожалуйста, отметьте его решением

Answer 2

[Владимир Проскурин]

Зачем флексы? Ставите родителю text-align: center, ставите каждому блоку display: inline-block. Картинки должны быть корректными, не иметь пустых полос по бокам (а если иметь, то равные с обеих сторон), чтобы нормально выравниваться по центру. Зачем position: absolute у h3?

Comments

[Виталий]

Просто я уже разные способы перепробовал, поэтому и добавил, а что, а вдруг. О-отчаяние

[Владимир Проскурин]

vitsen777, вот такая разметка будет норм https://jsfiddle.net/2kqh13pr/

[Виталий]

Просто ОГРОМНОЕ спасибо

[Сергей delphinpro]

для выравнивания можно оберткам задать ширину 20%, и всё. Лучше все же флексы, чтобы не парится с inline отступами.

[Сергей delphinpro]

https://jsfiddle.net/41s70kyj/

[Владимир Проскурин]

Сергей delphinpro, с процентами не очень круто, т.к. придется отдельно адаптировать. В моем же коде, если контейнеру поставить

max-width: 400px;
width: 100%;

то все очень легко адаптируется само под любые экраны. https://jsfiddle.net/1c9vpdj8/
А на отступы можно не смотреть, они не мешают в данном случае.

[Сергей delphinpro]

Владимир Проскурин, ответочка =) https://jsfiddle.net/4joc3xnw/

[Владимир Проскурин]

Сергей delphinpro, ну, без width: 20% ок)

Answer 3

[Юпитер Макс]

для элементов display:inline-block; для обертки элементов text-align:center;