图像轮播无法在Clickfunnel上居中对齐

Question

我正在尝试插入一个图像轮播到一个登录页面，我正在通过Clickfunnels编辑。我在自定义CSS/HTML框中输入了以下代码。旋转木马可以工作，但它没有居中。我已经尝试更改了一些部分，比如将"align=center“放在div中，这是我在谷歌搜索后看到的提示，但都无济于事。有人能帮帮忙吗？提前谢谢。

​

#currentfield {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#totalfield img {
  float: left;
}

#totalfield {
  width: 500%;
  height: 100%;
  animation: slide 16s infinite;
}

.slider-1,
.slider-2,
.slider-3,
.slider-4,
.slider-5 {
  width: 20%;
  height: 100%;
  float: left;
}

@keyframes slide {
  0% {
    margin-left: 0%;
  }
  15% {
    margin-left: 0%;
  }
  20% {
    margin-left: -100%;
  }
  35% {
    margin-left: -100%;
  }
  40% {
    margin-left: -200%;
  }
  55% {
    margin-left: -200%;
  }
  60% {
    margin-left: -300%;
  }
  75% {
    margin-left: -300%;
  }
  80% {
    margin-left: -400%;
  }
  95% {
    margin-left: -400%;
  }
  100% {
    margin-left: 0%;
  }
}

<div id="currentfield">
  <div id="totalfield">
    <div class="slider-1"><img id="slide1" src="https://images.clickfunnels.com/23/69afb0f674439eac09557590559870/MFINC-Houston-TX-02272021-sm.jpg" style="width:50%;height:50%"></div>
    <div class="slider-2"><img id="slide2" src="https://images.clickfunnels.com/a4/10c58c44484f27b30d3f8a30aec346/MFINC-Houston-TX-02082020-sm.jpg" style="width:50%;height:50%"></div>
    <div class="slider-3"><img id="slide3" src="https://images.clickfunnels.com/2e/438f87adc24ae7a1d65725c8fb97a8/MFINC-Houston-TX-02222019-sm.jpg" style="width:50%;height:50%"></div>
    <div class="slider-4"><img id="slide4" src="https://images.clickfunnels.com/80/a3ee9a78dc438c86eb3b0095f65975/MFINC-Los-Angeles-CA-06222019-sm.jpg" style="width:50%;height:50%"></div>
    <div class="slider-5"><img id="slide5" src="https://images.clickfunnels.com/1f/3488df977c448c8e6a78dfc413bbd7/MFINC-Boston-MA-10052019-sm.jpg" style="width:50%;height:50%"></div>
  </div>
</div>

​

Answer 1

您可以在镜像容器上使用display:flex和justify-content:center：

​

#currentfield {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#totalfield img {
  float: left;
}

#totalfield {
  width: 500%;
  height: 100%;
  animation: slide 16s infinite;
}

.slider-1,
.slider-2,
.slider-3,
.slider-4,
.slider-5 {
  display: flex;
  justify-content: center;
  width: 20%;
  height: 100%;
  float: left;
}

@keyframes slide {
  0% {
    margin-left: 0%;
  }
  15% {
    margin-left: 0%;
  }
  20% {
    margin-left: -100%;
  }
  35% {
    margin-left: -100%;
  }
  40% {
    margin-left: -200%;
  }
  55% {
    margin-left: -200%;
  }
  60% {
    margin-left: -300%;
  }
  75% {
    margin-left: -300%;
  }
  80% {
    margin-left: -400%;
  }
  95% {
    margin-left: -400%;
  }
  100% {
    margin-left: 0%;
  }
}

<div id="currentfield">
  <div id="totalfield">
    <div class="slider-1"><img id="slide1" src="https://images.clickfunnels.com/23/69afb0f674439eac09557590559870/MFINC-Houston-TX-02272021-sm.jpg" style="width:50%;height:50%"></div>
    <div class="slider-2"><img id="slide2" src="https://images.clickfunnels.com/a4/10c58c44484f27b30d3f8a30aec346/MFINC-Houston-TX-02082020-sm.jpg" style="width:50%;height:50%"></div>
    <div class="slider-3"><img id="slide3" src="https://images.clickfunnels.com/2e/438f87adc24ae7a1d65725c8fb97a8/MFINC-Houston-TX-02222019-sm.jpg" style="width:50%;height:50%"></div>
    <div class="slider-4"><img id="slide4" src="https://images.clickfunnels.com/80/a3ee9a78dc438c86eb3b0095f65975/MFINC-Los-Angeles-CA-06222019-sm.jpg" style="width:50%;height:50%"></div>
    <div class="slider-5"><img id="slide5" src="https://images.clickfunnels.com/1f/3488df977c448c8e6a78dfc413bbd7/MFINC-Boston-MA-10052019-sm.jpg" style="width:50%;height:50%"></div>
  </div>
</div>

​