Проблемы с центрированием

Question

Есть вот такой блок Картинка должна быть по середине, но она немного слева. Помогите это исправить пожалуйста

.price-item {
  display: flex;
  justify-content: center;
  text-align: center;
}

.price-item fieldset,
legend {
  color: #1A9F29;
  font-size: 20px;
  font-weight: 600;
}

.second-picture-price {
  background-image: url(/assets/img/picturePrice2.jpg);
  background-position: 34% 60%;
  width: 190px;
  height: 190px;
  border-radius: 100%;
}

<div class="price-item">
  <fieldset>
    <legend>Капитальный ремонт</legend>
    <div class="second-picture-price">
    </div>
    <div class="second-price">
      <p>От 4500 руб.м<sup>2</sup></p>
    </div>
  </fieldset>
</div>

Answer 1

Добавил к этому блоку свойство position: relative; и к .second-picture-price добавил position: relative; left: 6px; сейчас все отображается корректно

Answer 2

Добавил к этому блоку свойство position: relative; и к .second-picture-price добавил position: relative; left: 6px; сейчас все отображается корректно

И как только у вас поменяются габариты блока (например, из-за увеличения длины содержимого тега Legend, все снова придется корректировать.

Держите:

.price-item fieldset {
  text-align:center;
}

.price-item fieldset,
legend {
  color: #1A9F29;
  font-size: 20px;
  font-weight: 600;
  
}

.second-picture-price {
  background-image: url(https://img2.cgtrader.com/items/707327/6d34623ff1/large/cartoon-version-small-flower-bark-forest-3d-model-max-obj-3ds-fbx-mtl-tga.jpg);
  background-position: center;
  width: 190px;
  height: 190px;
  border-radius: 100%;
  margin:0 auto;
}

<div class="price-item">
  <fieldset>
    <legend>Капитальный ремонт, ремонт и еще ремонт</legend>
    <div class="second-picture-price">
    </div>
    <div class="second-price">
      <p>От 4500 руб.м<sup>2</sup></p>
    </div>
  </fieldset>
</div>

Answer 3

попробуйте position это css если что. Вот как это работает доступим картинка

название{ position :absolute; left 50 px; top 4px; и все также есть bottom ( вниз) и right(право)

} Удачи!

БЛОГ НА HUSL

Проблемы с центрированием

Ответы (3 шт):