如何在一行中居中图像和滑块[重复]

Posted 2023-03-05

【中文标题】如何在一行中居中图像和滑块[重复]

【英文标题】：How to center images and a slider in one line [duplicate]

【发布时间】：2022-01-02 09:14:36

【问题描述】：

我想在中间有 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>

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

【参考方案1】：

我希望这会有所帮助。

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

【讨论】：

我认为你误解了这个问题（我承认这并不完全清楚）。

【参考方案2】：

尝试使用这个 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>

【讨论】：

这可行，但在响应行为方面往往不太宽容。例如，您可以在小屏幕上看到重叠。 Flexbox 是更好的解决方案。