How can you center div or how can you center div inside another div?
This is a common problem.
For example, you have a paging with different number of pages and you need to center whole paging div inside parent div container.
JQuery is helpful there.
Look first at the picture (we want to center this paging control inside parent div control)
Center paging control
If you have paging div:
<div id="paging" class="jPaginate" style="padding-left: 67px; left: 0px;">
<div class="jPag-control-back"><a class="jPag-first" style="border: 1px solid #8496ad;
color: #000000; background-color: #ffffff;">First</a>
<span class="jPag-sprevious">«</span></div>
<div style="overflow: hidden; width: 410px;">
<ul class="jPag-pages">
<li><span class="jPag-current" style="border: 1px solid #cccccc; color: #ffffff;
background-color: #0075ff;">1</span></li>
<li><a style="border: 1px solid #8496ad; color: #000000;
background-color: #ffffff;">2</a></li>
<!--...more pages...-->
</ul>
</div>
<div class="jPag-control-front" style="left: 481px;">
<span class="jPag-snext">»</span><a class="jPag-last"
style="border: 1px solid #8496ad; color: #000000;
background-color: #ffffff;">Last</a></div>
</div>
You can use JQuery syntax:
$("#paging").css('left',($("#paging").width() -
($(".jPag-control-front").position().left +
$(".jPag-control-front").width())) / 2);
What does this JQuery command do?
- $(“#paging”) – finds div with id=”paging”
- $(“#paging”).css(‘left’, 50); – move left “paging” div for 50px
- $(“.jPag-control-front”).position().left – finds left distance for div element that has css class=”jPag-control-front” from the beginning of “paging” div
- So, you get the left distance of Last element (div that has css class=”jPag-control-front” ) and you add the width of Last element to this left offset and then you substract this sum from parent div width and, at the end, you divide all this by two to get the blank space you need to move you paging div from the left.
