Question

我有一个分页并希望将其集中在一起： http://jsfiddle.net/6819rhLf/

<ul class="slidesjs-pagination">
    <li class="slidesjs-pagination-item">
        <a href="#" data-slidesjs-item="0" class="active">1</a>
    </li>
    <li class="slidesjs-pagination-item">
        <a href="#" data-slidesjs-item="1">2</a>
    </li>
    <li class="slidesjs-pagination-item">
        <a href="#" data-slidesjs-item="2">3</a>
    </li>
</ul>

margin-left auto; margin-right: auto;上的{p> slidesjs-pagination仅在slidesjs-pagination获得固定宽度时有效。但是我不知道会有多少项目，所以固定宽度不适合我。

代码是用JS生成的，所以我希望有一个解决方案，如果可能的话我不需要父div。

Answer 1

在ul周围添加了一个div，并将cloud class添加到CSS中，如下所示

<div class="cloud">
 //<ul>...</ul>
</div>

CSS类

.cloud
{
    display:table;
    margin:0 auto 0 auto;
}

请看this，希望有所帮助

Answer 2

使用类容器添加包装器div：

<div class="container">

然后使用CSS3：

div.container {
    height: 10em;
    position: relative }
div.container ul {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
}

水平和垂直居中，因此您可以四处游戏以获得所需的布局。

Answer 3

添加父div并将ul设置为display:inline-block并将text-align:center添加到父

或者如果您已经有父元素，则将text-align:center添加到其中

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.parent {
  text-align: center;
}
.slidesjs-pagination {
  display: inline-block;
}
.slidesjs-pagination-item {
  float: left;
  list-style: none;
}
.slidesjs-pagination-item a {
  display: block;
  width: 12px;
  height: 0px;
  padding-top: 12px;
  background-image: url("http://placehold.it/12x12");
  overflow: hidden;
}

＆＃13;

<div class="parent">
  <ul class="slidesjs-pagination">
    <li class="slidesjs-pagination-item"> 
      <a href="#" data-slidesjs-item="0" class="active">1</a>
    </li>
    <li class="slidesjs-pagination-item"> 
      <a href="#" data-slidesjs-item="1">2</a>
    </li>
    <li class="slidesjs-pagination-item"> 
      <a href="#" data-slidesjs-item="2">3</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 4

ul{
  float:none;
  padding:0;
  margin:0;
 text-align:center;
}
ul li{
  float:none;
  display:inline-block;
  vertically-align:top;
}

如何在没有固定宽度的情况下居中分页？

4 个答案: