How to center jqPagination widget?

Tags: javascript,jquery,html,css

Problem :

I'm using a pagination plugin called jqPagination. The thing is that I want to center it in a parent container, but the widget uses "float:left" in the css which makes this hard.

If I remove the float:left, the widget somewhat breaks and since it doesn't use an explicit width, the old "margin-left:auto;margin-right:auto;" trick doesn't work :(

How can I center this widget in a parent container?

Solution :

Add .clearfix class (clearfix) to the jqPagination container and style

display: inline-block;
float: none;

After that wrap jqPagination container with another div and set text-align: center; for it.

    CSS Howto..

    How to pause a CSS keyframe animation when it ends the first cycle?

    how to save responsive menu open/close value?

    Show Button in Table Cell Hover Over/Mouse Over

    How to fix a div to the same side when a mobile is on landscape

    CSS How to animate a transition from opacity 0 upon hover

    CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options

    Tab menu in CSS - how to set an active tab

    Pure CSS Slideshow with animation delay fadein fadeout effects

    CSS showing and hiding childs and parents

    how to use css sprites? [closed]

    How to detect DOM element position to use different CSS style via CSS selection

    Modernizr: how do I detect CSS display:table-cell support?

    How to remove css and javascript code in source code of website

    How to change the CSS of Background Element?

    How to write css for fixed header and scrollable table

    How to make a rectangle mask with css

    How to create DropDown MenuBar using CSS

    How to use form-inline bootstrap 3?

    How to apply a sifr rule to a hyperlink and also its counterpart

    How to control css of images on top of a full page semi-transparent overlay div

    How to center two elements which are separately wrapped in ?

    How to get an ellipsis to display on text in CSS

    PrimeFaces: how can I make use of customized icons?

    Dynamic HTML 3 layers nested quotes - how to do?

    how to float the section tags in html5

    How to align div to the bottom of another div in HTML?

    How to have video faded when paused - HTML

    How to read and show accelerometer data (server side) using JavaScript and Node.js

    How to use CSS to horizontally fill the width of page with HTML menu headers?

    How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar