How to center pagination without fixed width?

Question

I have a pagination and want to center it: 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; on slidesjs-pagination only works when slidesjs-pagination got a fixed width. But I can't tell how much items there will be, so fixed width will not do it for me.

The code is generated with JS, so I would like to have a solution where I don't need a parent div if that is possible.

Did you try setting the display of ul.slidesjs-pagination to "inline-block"? — Callan, Jan 12 '15 at 16:23
possible duplication - http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width — Luís P. A., Jan 12 '15 at 16:24

score 1 · Answer 1 · answered Jan 12 '15 at 17:57

1

added a div around the ul,and added cloud class to CSS as below

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

CSS class

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

have a look at this please , hope it helps

answered Jan 12 '15 at 17:57

Nima Derakhshanjan

1,380
9
24
37

score 0 · Answer 2 · answered Jan 12 '15 at 16:24

0

Add a wrapper div with class container:

<div class="container">

then use 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%) 
}

This centers both horizontally and vertically, so you can play around to get the layout you want.

answered Jan 12 '15 at 16:24

ZacWolf

752
5
18

I hoped to find a solution without a parent div (cause the HTML comes from a plugin and does not have a container). I'm not sure if it's possible. If not I will add a container. – nbar Jan 12 '15 at 16:36

score 0 · Answer 3 · answered Jan 12 '15 at 16:25

Add a parent div and set ul to display:inline-block and add text-align:center to parent

or if you already have a parent element then add text-align:center to it

* {
  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;
}

<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>

I hoped to find a solution without a parent div (cause the HTML comes from a plugin and does not have a container). I'm not sure if it's possible. If not I will add a container. — nbar, Jan 12 '15 at 16:35
Without a parent container you could add the text-align:center property to the tag (this still requires the
to be display:inline-block). — Chris, Jan 12 '15 at 16:45

score 0 · Answer 4 · answered Jan 12 '15 at 17:00

0

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

answered Jan 12 '15 at 17:00

Shaban Khan

156
9

Code only answers can generally benefit from the addition of an explanation. – Jason Aller Jan 12 '15 at 17:18

How to center pagination without fixed width?

4 Answers4