html - 位置：绝对，宽度：未知。如何使div居中

Question

我需要将 div 与此页面上图像滑块上的点对齐： https ://dharman.eu/sites/daftpunk/

我已经在 SO 上搜索了一种方法，我发现了这个线程： Position center of div tag, which width is unknown advanced

我应用了那里给出的解决方案，但结果并不像我预期的那样。div 看起来比它应该的更靠右一点。

谁能告诉我这里可能是什么问题？

编辑：这发生在 FF 中，在 Chrome 中，div 一直向右。

Answer 1

试试这个CSS #sliderDots：

#sliderDots {
    position: relative;
    bottom: 40px;
    display: inline-block;
    background-color: whiteSmoke;
    border-radius: 15px;
    box-shadow: 0 0 10px 3px, 0 0 10px 0 #888 inset;
    padding: 10px 10px 10px 20px;
}

在 IE、FF 和 Chrome 中工作正常（位置更改为relative，底部更改为40px）

Answer 2

<center style="width:750px;height:20px">
    <div id="sliderDots">
        <ul>
            <li class="activeDot"></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
            <li class=""></li>
            <li class="">
            </li></ul>
    </div>
</center>

为什么 750px 居中？

因为您的“内容”类的宽度为 800 像素，而右填充 + 左填充为 50 像素。

Answer 3

您还可以将 div 放在另一个容器 div 中，该容器 div 绝对定位并位于同一空间中，但随后将 sliderDots div 与 margin: auto 相对。