Reputation: 1170
I'm using the Bootstrap Pagination, all the examples here are using it aligned to left of parent; while in cases I want to make it center aligned, horizontally; I have tried the inline style margin: 0 auto
and display: inline-block; or block
and many other ways, but it's still not working, in Chrome Dev Tools I can see it's because it has a .pagination
class which defined padding-left: 0;
that stopped from being center aligned, from the DevTool I can uncheck the line of padding-left: 0;
and it becomes center aligned;
http://getbootstrap.com/components/#pagination
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
So, for overriding, I know it's easy to override it to be another value, but if I override to another specific number, it would not be responsive to window dimension changes, I've tried to set padding: auto;
but auto seems not valid for padding? I wonder is there anyway to override it to be unspecified? like uncheck it from DevTool?
Upvotes: 0
Views: 1167
Reputation: 4440
Try putting text-align: center;
on the parent container of the nav container. In this page here it works fine if doing it with dev tools. Find the class .bs-example
and add text -align: center
too see it work there.
Oddly enough the padding-left: 0;
actually keeps it centered because of the ghost button/space to the left of the left navigation arrow.
Upvotes: -1