Question

我有一个滑块，其中包含按绝对值定位的导航点。我想知道如何用X轴将这些点居中。

当它设置正确时我很好：10％;在桌面布局。但是当％的值时，移动设备会出现美学问题，由于宽度较小，它在中心看起来从未正确。

我搜索了很多，最流行的解决方案是

left: 50%;
right: 50% transform: translateX(50%);

但它仍然像左边一样工作..请看下面的jsfiddle代码，我需要第二个和第三个白点之间的空间被白色垂直线切割。

https://jsfiddle.net/dpmango/vk9oc6gt/2/

感谢您提前帮助！

Answer 1

https://jsfiddle.net/vk9oc6gt/3/

transform:translateX(-50%);是您正在寻找的。

请注意，当您应用transform:translateX(-50%);时，它会将元素移动元素的维度的百分比，在这种情况下是宽度，因为它是X轴转换，50％，因为我们指定了它，因为它是负值，所以在左边。

我在中间点div和中间白线中添加了它：

.center-line {
  position: absolute;
  background-color: white;
  top: 0;
  left: 50%;
  transform:translateX(-50%);
  width: 2px;
  height: 100%;
}

.owl-dots {
  display: inline-block;
  position: absolute;
  top: 80px;
  left:50%;
  transform:translateX(-50%);
}

如果你也需要垂直居中的点，你可以使用这个https://jsfiddle.net/vk9oc6gt/4/：

top:50%;
left:50%;
transform:translate(-50%, -50%);

Answer 2

为什么不用这个？ - .owl-dots{width: 100%, text-align:center; left:0;}

如何居中位置：响应式布局中的绝对元素

2 个答案: