Question

我需要将div放在此页面上图像滑块上的点中心： http://dharman.eu/daftPunk/

我已经在SO上搜索了一种方法，我找到了这个帖子： Position center of div tag, which width is unknown advanced

我应用了那里给出的解决方案，但结果并不像我预期的那样。 div看起来比右边的中心要多一点。

有谁能告诉我这里可能出现什么问题？

编辑：这种情况发生在FF中，Chrome中的div就是一直到右边。

Answer 1

为#sliderDots试用此CSS：

#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要居中？

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

Answer 3

你也可以将div放在另一个绝对定位并位于同一空间的容器div中，但然后使sliderDots div相对于margin：auto applied。

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

3 个答案: