CODEWITHSUNDEEP
htmlcsshtml-listscenter
Adrianno Barello
Adrianno Barello

Reputation: 137

How to center ul li list without knowing its width? (pagination)

How to center this ul_li list without knowing its width? I need it because it width can be different in various situations.

And there is question, how to center this list and make it looks exactly the same, just centered?

margin-left: auto, margin-right: auto doesn't work. :<

.pagination {
  margin-left: auto;
  margin-right: auto;
  min-width: 100px;
  height: 30px;
  display: table;
}

.pagination ul {
  list-style: none;
}

.pagination ul li {
  float: left;
  padding: 10px;
  border: 1px solid #000000;
  font-size: 14px;
  border-radius: 10%;
}
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
        <![endif]-->

<div class="pagination">
  <ul>
    <li>
      &laquo;
    </li>
    <li>
      1
    </li>
    <li>
      2
    </li>
    <li>
      3
    </li>
    <li>
      4
    </li>
    <li>
      &raquo;
    </li>
  </ul>
</div>

Upvotes: 0

Views: 517

Answers (2)

Ahmed Ginani
Ahmed Ginani

Reputation: 6650

You just need to add padding:0 inside .pagination ul. nothing else.

Please check this.

.pagination {
  margin-left: auto;
  margin-right: auto;
  min-width: 100px;
  height: 30px;
  display: table;
}

.pagination ul {
  list-style: none;
  padding:0;
}

.pagination ul li {
  float: left;
  padding: 10px;
  border: 1px solid #000000;
  font-size: 14px;
  border-radius: 10%;
}
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]>
        <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
        <![endif]-->

<div class="pagination">
  <ul>
    <li>
      &laquo;
    </li>
    <li>
      1
    </li>
    <li>
      2
    </li>
    <li>
      3
    </li>
    <li>
      4
    </li>
    <li>
      &raquo;
    </li>
  </ul>
</div>

Upvotes: 0

Sahil Dhir
Sahil Dhir

Reputation: 4250

Use display:inline-block on li instead of float:left and give the parent text-align:canter.

Here is the work around.

.pagination {
  margin: 0px auto;
  width: auto;
  text-align: center;
}

.pagination ul {
  list-style: none;
  padding: 0px;
  width: auto;
}

.pagination ul li {
  display: inline-block;
  padding: 10px;
  border: 1px solid #000000;
  font-size: 14px;
  border-radius: 10%;
}
<div class="pagination">
  <ul>
    <li>
      &laquo;
    </li>
    <li>
      1
    </li>
    <li>
      2
    </li>
    <li>
      3
    </li>
    <li>
      4
    </li>
    <li>
      &raquo;
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions