Question

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

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

你能告诉我什么是错的以及如何解决它？

注意：#carousel-paginator是动态创建的，每个页面请求的大小可能不同。

HTML

<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%);

到您的ID：

#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;
}

此时，我们的元素是行高的顶部+ 1em的50％。只需将线高度调高一半即可使其垂直居中，如下所示：

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

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

如果你想将它水平居中，这很简单。

将分页的宽度设置为100％，并将text-align设置为center：

#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;
    text-align:center;
    padding-left:350px;
    padding-right:350px;
}

Answer 4

试试这个css：
#carousel-paginator { 位置：绝对; 上：100px; z-index：1; 左：250像素;

如何将div与位置相对的div中的位置绝对对齐？

4 个答案: