How to center images and a slider in one line-CodePudding

I would like to have 3 buttons in the middle and a slider on the right side, these on the same line. The problem is that when I center the buttons and float the slider to the right, the buttons are not in the middle anymore. So it looks like this: https://imgur.com/a/LuZYFsC (ignore the top slider) I was browsing the internet, but I didn't know how to search for it, and I could not find an answer.

HTML:

  <div>
    <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>

CSS:

.container{
  text-align: center;
}

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

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

It might be a mess, but I was just trying out stuff.

CodePudding user response：

I hope this will help.

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

CodePudding user response：

Try using this CSS code :

.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>