如何将图像和滑块集中在一行中

Question

我想在中间有3个按钮，右边有一个滑块，这些都在同一条线上。问题是，当我把按钮的中央和滑块向右浮动的时候，按钮就不在中间了。所以看起来是这样的(忽略顶部滑块)：

​

​

​

.container {
  text-align: center;
}

.music-buttons {
  width: 50px;
  height: 50px;
}

.volume-control {
  margin-right: 10px;
  float: right;
}

<div>
  <input type="range" class="volume-control">
</div>
<div class="container">
  <img class="music-buttons" src="https://via.placeholder.com/50">
  <img class="music-buttons" src="https://via.placeholder.com/50">
  <img class="music-buttons" src="https://via.placeholder.com/50">
</div>

​

可能是一团糟，但我只是在尝试一些东西。

Answer 1

尝试使用以下CSS代码：

​

.container{
  text-align: center;
}

.music-buttons{
  width: 50px;
  height: 50px;
}

.volume-control{
  margin-right: 10px;
  position: absolute;
  right: 10px;
  top: 22px;
}

  <div class="div-range">
    <input type="range" class="volume-control">
  </div>
  <div class="container">
    <img class="music-buttons" src="../icons/skip-start-circle.svg">
    <img class="music-buttons" src="../icons/play-circle.svg">
    <img class="music-buttons" src="../icons/skip-end-circle.svg">  
  </div>

​

Answer 2

我希望这能帮上忙。

​

.container{
  text-align: center;
}

.music-buttons{
  width: 50px;
  height: 50px;
}

.volume-control{
  text-align: center;   
  height: 50px;
}

<div class="container">
    <div class="row">
      <div class="col">
        <img class="music-buttons" src="https://img.icons8.com/ios/50/000000/skip-to-start--v1.png">
        <img class="music-buttons" src="https://img.icons8.com/ios/50/000000/pause--v1.png">
        <img class="music-buttons" src="https://img.icons8.com/external-kiranshastry-lineal-kiranshastry/64/000000/external-skip-multimedia-kiranshastry-lineal-kiranshastry.png"> 
        <input type="range" class="volume-control">
      </div>
     </div>
  </div>

​