Question

I currently have a pagination module that can’t be done in a ul/li. it’s just a surrounding div w/ a bunch of anchors inside.

<div class="pagination">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
</div>

Each has padding to make the width/height since the numbers can go from single digit to triple digit (1-1##). I need to center the pagination, but without a width I can’t do it. The width is always changing depending on the numbers in the pagination. How can I apply the width of all the to the containing w/ class ‘pagination’?

var pagWidth = $('.pagination').width();
$('.pagination').css('width',pagWidth);

I know this is incorrect, as it will apply the width of the which will calculate 100% of whatever width the div is in. Please assist.

Answer 1

You can do this with css. To centre your div use the following :

.pagination
{
   margin:0px auto;
}

or use it’s equivalent in javascript.

To calculate the width of all the children.

var totalWidth = 0;

$("div.pagination").children().each(function() {
   totalWidth = totalWidth + $(this).width();
});

$('.pagination').css('width',totalWidth);