Issue
I have this code in pagination
<div class="pagination">
<ul>
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
But my ul
is left aligned. Is there any way to center the ul
wrt div
?
I tried margin: auto auto
and margin :0 auto
they but didn't work.
Solution
Bootstrap has added a new class from 3.0.
<div class="text-center">
<ul class="pagination">
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
Bootstrap 4 has new class
<div class="text-xs-center">
<ul class="pagination">
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
For 2.3.2
<div class="pagination text-center">
<ul>
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
Give this way:
.pagination {text-align: center;}
It works because ul
is using inline-block;
Fiddle: http://jsfiddle.net/praveenscience/5L8fu/
Or if you would like to use Bootstrap's class:
<div class="pagination pagination-centered">
<ul>
<li><a href="?p=0" data-original-title="" title="">1</a></li>
<li><a href="?p=1" data-original-title="" title="">2</a></li>
</ul>
</div>
Fiddle: http://jsfiddle.net/praveenscience/5L8fu/1/
Answered By - Praveen Kumar Purushothaman
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.