Question

我想将您可以找到的滑块控件居中here

我尝试了各种方法，例如right:0; left:0; margin-left:auto; margin-right:auto和另外两种方式。

但不知何故，我无法以响应方式使其居中，因此在任何视口中，它始终保持中心。

那么有没有办法实现它？

Answer 1

这将使您的控件居中，而无需使用宽度，但仅适用于现代浏览器：

.anythingSlider-minimalist-round .anythingControls {
  position: absolute;
  z-index: 100;
  opacity: 0.90;
  filter: alpha(opacity=90);
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
}

此方法适用于旧版浏览器，但您需要固定宽度：

.anythingSlider-minimalist-round .anythingControls {
  position: relative;
  z-index: 100;
  opacity: 0.90;
  filter: alpha(opacity=90);
  bottom: 5%;
  width: 190px;
  margin: 0px auto;
}

在此处查看其他方法时，还有一些其他方法可以将div放在页面上，这可能是值得的：How to horizontally center a <div> in another <div>?

Answer 2

看起来它们只是在放入移动设备时被隐藏起来。您可以通过将其放入媒体查询小屏幕（移动）来重新显示它们。

.anythingSlider-minimalist-round .anythingControls{
  display: block !important;
  margin: 0 auto;
  text-align: center;
  width: 186px;
  position: relative;
  top: -40px;
  right: 0;
  float: none;
  left: 0;
  bottom: 0;
}

Answer 3

将滑块控件放在width:100%且其内容设置为text-align:center的div中。将div绝对位于底部：20px（调整此值以从底部设置所需的偏移量）。最后，包含滑块控件div的容器需要设置为position:relative。

div.slider-controls {
  width:100%;
  text-align:center;
  position: absolute;
  left: 0px;
  bottom: 20px;     <----- adjust this until you
}                          like the offset from the
                           bottom of the slider

div.slider-container {
  position: absolute;
}

我不知道您的布局是什么样的，但在上面的示例中，假设div.slider-controls是div.slider-container的子元素。

中心滑块以响应方式控制

3 个答案: