如何在位置相对的div内与位置绝对的div对齐？

Question

我想把#carousel-paginator放在.content-snippet的中心。

使用下面的CSS无法获得所需的结果http://jsfiddle.net/y7S7Z/

你能告诉我出了什么问题吗?怎么解决？

注意：#carousel是动态创建的，可以在每个页面请求上具有不同的大小。

<div id="snippet-cnt-0" class="content-snippet">
                            <!-- cnt adv carousel -->
                            <div id="carousel-paginator"><ul>
                                <li id="paginator-0" class="item-paginator">0</li>
                                <li id="paginator-1" class="item-paginator activePaginator">1</li>
                                <li id="paginator-2" class="item-paginator">2</li><li id="paginator-3" class="item-paginator">3</li>
                                <li id="paginator-4" class="item-paginator">4</li><li id="paginator-5" class="item-paginator">5</li><li id="paginator-6" class="item-paginator">6</li></ul></div>
                            <div id="carousel-container">
                                <div id="carousel-inner">

                                    <ul id="carousel-ul"><li id="item-6" data-dataid="6" class="item focusable focus">6</li><li id="item-0" data-dataid="0" class="item focusable">0</li><li id="item-1" data-dataid="1" class="item focusable">1</li><li id="item-2" data-dataid="2" class="item focusable">2</li><li id="item-3" data-dataid="3" class="item focusable">3</li><li id="item-4" data-dataid="4" class="item focusable">4</li><li id="item-5" data-dataid="5" class="item focusable">5</li></ul>
                                </div>
                            </div>
                            <div id="btn-carousel-left">PREV</div>
                            <div id="btn-carousel-right">NEXT</div>
                        </div>

CSS

.content-snippet {
    height: 250px;
    outline: 1px solid green;
}
ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#carousel-paginator {
    position: absolute;
    top: 100px;
    z-index: 1;
}

#carousel-paginator > ul li {
    float: left;
    background-color: lightblue;
}

#carousel-paginator > ul li, #carousel-paginator .activePaginator {
    font-size: 18px;
    text-align: center;
}

Answer 1

有一个很好的CSS3解决方案来定位它的父级中心的每个项目。如果你有绝对的位置元素。

试着添加

left:50%;
transform:translateX(-50%);
-webkit-transform:translateX(-50%);
-ms-transform:translateX(-50%);

你的身份证：

#carousel-paginator {
  position: absolute;
  top: 100px;
  z-index: 1;
  left:50%;
  transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
}

http://jsfiddle.net/y7S7Z/6/

永远记住前缀！

Answer 2

如果您知道分页将占用多少行(在本例中，只占1行)，则实际上知道元素的高度。这意味着您可以使用线高度技巧来对元素进行居中。

这是小提琴：http://jsfiddle.net/y7S7Z/10/

首先，在分页上设置行高：

#carousel-paginator {
    position: absolute;
    top: 50%;
    z-index: 1;

    line-height: 1em;
}

在这一点上，我们的元素是50%从顶部+ 1em在直线高度。简单地把它抬高一半的直线高度来垂直地居中，如下所示：

#carousel-paginator {
    position: absolute;
    top: 50%;
    z-index: 1;

    line-height: 1em;
    margin-top: -0.5em;
}

如果你也想水平地对着它，那就很简单了。

将分页宽度设置为100%，并将文本对齐设置为中心：

#carousel-paginator {
    position: absolute;
    top: 50%;
    z-index: 1;

    line-height: 1em;
    margin-top: -0.5em;
    width: 100%;
    text-align: center;
}

然后，您只需要在ul中设置inline-block (因为您将其中的项左浮动)：

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;

    display: inline-block;
}

Answer 3

试试这个css：

 #carousel-paginator {         position: absolute;         top: 100px;         z-index: 1;         left:250px;

}