Несколько изображений с заголовком

Question

У меня есть фон с изображением, в этом bakground у меня есть 3 изображения с 3 числами.Я хотел бы для каждого номера, центрируйте число с изображением.
Я застрял со свойством margin-left

.background-picture-red{
  height: 130px;
  width: 100%;
  position: absolute;
  background-image: url(https://i.ibb.co/jVWdfG4/bg-2.jpg);
}

.picture01{
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(224,0,0,0.30);
  float:left;
  margin-top: 10px;
  margin-left: 50px;
  z-index: 1;
  position: relative;
}

.picture01-title{
  font-family: 'Questrial', sans-serif;
  font-size: 16px;
  color: white;
  margin-left: 50px;
  margin-top: 100px;
  position: absolute;
}

.picture02{
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(224,0,0,0.30);
  float:left;
  margin-top: 10px;
  margin-left: 60px;
  z-index: 1;
  position: relative;
}

.picture02-title{
  font-family: 'Questrial', sans-serif;
  font-size: 16px;
  color: white;
  margin-left: 50px;
  margin-top: 100px;
  position: absolute;
}

.picture03{
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(224,0,0,0.30);
  float:left;
  margin-top: 10px;
  margin-left: 70px;
  z-index: 1;
  position: relative;
}

.picture03-title{
  font-family: 'Questrial', sans-serif;
  font-size: 16px;
  color: white;
  margin-left: 10px;
  margin-top: 100px;
  position: absolute;
}

<div class="background-picture-red"> 
   <img class="picture01" src="https://i.ibb.co/n3fv0YY/bitcoin34.png">
   <span class="picture01-title">138</span>
   <img class="picture02" src="https://i.ibb.co/qRSr1Wr/bitcoin46.png">
   <span class="picture02-title">258</span>
   <img class="picture03" src="https://i.ibb.co/BwT7gHz/bitcoin68.png">
   <span class="picture03-title">303</span>
</div>

Answer 1

Вот рабочий пример, где я добавил к каждому заголовку:

  margin-left: -43px;
  transform:translateX(-50%);

• margin-left: -43px: потому что размер вашего изображения 86px, поэтому -43px будет помещено в серединеизображение
• translateX(-50%): текст будет отцентрирован в зависимости от его размера

.background-picture-red{
  height: 130px;
  width: 100%;
  position: absolute;
  background-image: url(https://i.ibb.co/jVWdfG4/bg-2.jpg);
}

.picture01{
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(224,0,0,0.30);
  float:left;
  margin-top: 10px;
  margin-left: 50px;
  z-index: 1;
  position: relative;
}

.picture01-title{
  font-family: 'Questrial', sans-serif;
  font-size: 16px;
  color: white;
  margin-left: -43px;
  transform:translateX(-50%);
  margin-top: 100px;
  
  position: absolute;
}

.picture02{
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(224,0,0,0.30);
  float:left;
  margin-top: 10px;
  margin-left: 60px;
  z-index: 1;
  position: relative;
}

.picture02-title{
  font-family: 'Questrial', sans-serif;
  font-size: 16px;
  color: white;
  margin-left: -43px;
  transform:translateX(-50%);
  margin-top: 100px;
  position: absolute;
}

.picture03{
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 50%;
  background-color: rgba(224,0,0,0.30);
  float:left;
  margin-top: 10px;
  margin-left: 70px;
  z-index: 1;
  position: relative;
}

.picture03-title{
  font-family: 'Questrial', sans-serif;
  font-size: 16px;
  color: white;
  margin-left: -43px;
  transform:translateX(-50%);
  margin-top: 100px;
  position: absolute;
}

<div class="background-picture-red"> 
   <img class="picture01" src="https://i.ibb.co/n3fv0YY/bitcoin34.png">
   <span class="picture01-title">138</span>
   <img class="picture02" src="https://i.ibb.co/qRSr1Wr/bitcoin46.png">
   <span class="picture02-title">258</span>
   <img class="picture03" src="https://i.ibb.co/BwT7gHz/bitcoin68.png">
   <span class="picture03-title">303</span>
</div>

---

Но, возможно, вам следует использовать flexbox , чтобы делать подобные вещи.