如何在不破坏CSS Slider开关的情况下对齐它们

在不破坏CSS Slider开关的情况下对齐它们，可以通过以下方法实现：

使用Flexbox布局：将Slider开关包裹在一个容器中，并将容器的display属性设置为flex。然后，使用justify-content属性来控制Slider开关的水平对齐方式，使用align-items属性来控制垂直对齐方式。

示例代码：

<div class="slider-container">
  <input type="checkbox" id="slider1">
  <label for="slider1"></label>
</div>
<div class="slider-container">
  <input type="checkbox" id="slider2">
  <label for="slider2"></label>
</div>

.slider-container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

使用CSS Grid布局：将Slider开关包裹在一个容器中，并将容器的display属性设置为grid。然后，使用grid-template-columns属性来控制Slider开关的水平对齐方式，使用grid-template-rows属性来控制垂直对齐方式。

示例代码：

<div class="slider-container">
  <input type="checkbox" id="slider1">
  <label for="slider1"></label>
</div>
<div class="slider-container">
  <input type="checkbox" id="slider2">
  <label for="slider2"></label>
</div>

.slider-container {
  display: grid;
  justify-items: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

使用position属性：给每个Slider开关添加一个共同的父容器，并将父容器的position属性设置为relative。然后，使用position属性将Slider开关的位置进行微调，以实现对齐效果。

示例代码：

<div class="slider-wrapper">
  <input type="checkbox" id="slider1">
  <label for="slider1"></label>
</div>
<div class="slider-wrapper">
  <input type="checkbox" id="slider2">
  <label for="slider2"></label>
</div>

.slider-wrapper {
  position: relative;
}

.slider-wrapper input[type="checkbox"] {
  position: absolute;
  /* 根据需要进行微调 */
}

.slider-wrapper label {
  /* 根据需要进行微调 */
}

以上是三种常见的方法，根据具体情况选择适合的方法来对齐Slider开关，以实现所需的效果。