CODEWITHSUNDEEP
htmlcss
nbar
nbar

Reputation: 6158

How to center pagination without fixed width?

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.

Upvotes: 0

Views: 1044

Answers (4)

Nima Derakhshanjan
Nima Derakhshanjan

Reputation: 1404

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

Upvotes: 1

Shaban Khan
Shaban Khan

Reputation: 156

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

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

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>

Upvotes: 0

ZacWolf
ZacWolf

Reputation: 762

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.

Upvotes: 0

Related Questions