JINYU WU JINYU WU - 1 month ago 7
CSS Question

How to parallel progress bar to the center of an image?

I'm new to HTML and CSS, and I have a positioning question.

Here is the current layout
original_layout

I wanna make it looks like this
desired_layout



<div style="margin-left: 5%;">
<div style="display: inline;">
<img style=" width: 60px; " id="switch_img" src="../images/button_hotoff.png">
</div>

<div style="display: inline; padding-left: 10%;">
<input id="heatSlider" data-slider-id='heatSliderSlider' type="text" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="0" />
</div>
</div>





but I don't now how to move the progress bar up. Can anyone offer me any suggestion? Thanks

Answer Source

Try below code , i just try to make img and slider in one line , instead of different different lines.:

$('#heatSlider').slider();
.wrapper {
  display: flex;
  align-items: center;
}

.inline-block{
  display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.js"></script>

<div class="wrapper">
 <div class="inline-block" >
   <img style=" width: 60px; " id="switch_img" 
     src="https://image.ibb.co/f7sA2Q/icons8_Lock_50.png">
 </div>
<div class="inline-block" style="padding-left:2%">
 <input id="heatSlider" data-slider-id='heatSliderSlider' 
  type="text" data-slider-min="0" data-slider-max="255" data-slider-step="1" 
  data-slider-value="0" />
 </div>
</div>