CSS Positioning assistance on navigation content slider - html

Question

I'm having problems aligning two elements. I wish to align the pagination in the middle of the navigational arrows for my two mini content sliders.
Design example of what I require:
http://www.garyrevell.co.uk/student-i/PastedGraphic-8.png
The current WIP in progress live site - http://www.garyrevell.co.uk/student-i/index.html
The CSS
#slider1 { height: 1%; overflow:hidden; padding: 0 0 0 0; }
#slider1 .viewport { float: left; width: 240px; min-height: 190px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: inline-block; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 24px; overflow: hidden; position: relative; }
#slider1 .previous { background-position: 0 0; margin-left:5px; }
#slider1 .next { background-position: 0 0; left: 130px }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; width: 230px;}
/* Tiny Carousel - Slider Bullets */
#slider1 .pager, #slider2 .pager { overflow:hidden; list-style: none; clear: top; margin: 0 0 0 45px; }
/*Normal Style*/
#slider1 .pager li, #slider2 .pager li{ float: left; display: block;
}
#slider1 .pager a, #slider2 .pager a { width: 15px;
height: 12px;
width: 12px;
background:url(../images/bullet-norm.png); background-position: left top; background-repeat:no-repeat;
float: left;
text-indent: -4000px;
position: relative;
margin-left: 3px;
color: transparent;
display:inline-block;
cursor: pointer;
}
#slider1 .pager a:hover{
background-position: 0 50%;
}
#slider1 .pager .active {
color: #fff; background-image: url(../images/bullet-selected.png); } /*CURRENT IMAGE HERE*/
#slider1 .overview { list-style: none; position: absolute; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; width: 236px;
}
a.pagenum {margin-top: 12px;}
ul{border:0; margin:0; padding:0;}
Any help would be greatly appreciated.

Answer 1

set
ul.pager{
margin: 0 auto;
display: table; (ife the first line above alone did not work...)
}
Place this code after any of your other .pager referenced code
Also, remove any padding on the .pager class

Answer 2

Please update your css with mine css you will achieve your desired result :-
CSS
#slider1 .pager, #slider2 .pager {
list-style: none outside none;
margin: 0 0 0 45px;
overflow: hidden;
position: relative;
top: -23px;
}

Answer 3

Float left & right respectively the navigational arrows and remove left: 130px; from the second one.
Set equal left & right margin on ul.pager, set text-align: center on it and give its li display:inline-block

Answer 4

You can even align the pagination to be centered
CSS:
.pager-wrapper{
padding: 5px;
height: 23px;
width: something;
float: left;
text-align: center;
}
a {
padding: 10px;
margin: 4px;
border: 1px solid black;
text-decoration: none;
font-size: 1px;
}
a:hover {
background: red;
color: white;
}
.selected {
background: red;
color: white;
}
HTML:
<div class="pager-wrapper" >
<a class="selected" href="#">1</a>234
</div>