如何将进度条平行到图像的中心？

Question

我是HTML和CSS的新手，我有一个定位问题。

下面是当前布局布局

我想让它看起来像这个布局

​

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

​

但我现在不知道怎么把进度条往上挪。有人能给我什么建议吗？谢谢

Answer 1

尝试在下面的代码，我只是尝试使img和滑块在一行，而不是不同的行。

​

$('#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>

​