How to center images and a slider in one line

Question

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 (ignore the top slider):

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

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

score 2 · Accepted Answer · answered Nov 23 '21 at 22:04

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>

This works, but it tends to be less tolerant when it comes to responsive behavior. You could see overlap on small screens, for example. Flexbox is a better solution. — isherwood, Nov 23 '21 at 22:16

TheHunter Shergill · Answer 2 · 2021-11-23T22:10:58.137

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="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>

I think you've misunderstood the question (which I admit isn't entirely clear). — isherwood, Nov 23 '21 at 22:14

How to center images and a slider in one line

2 Answers2