html - 导航内容 slider 上的 CSS 定位辅助

Question

我在对齐两个元素时遇到问题。我希望将我的两个迷你内容 slider 的导航箭头中间的分页对齐。

我需要的设计示例:

http://www.garyrevell.co.uk/student-i/PastedGraphic-8.png

当前正在进行的 WIP 实时站点 - http://www.garyrevell.co.uk/student-i/index.html

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;}

如有任何帮助，我们将不胜感激。

Answer 1

设置

ul.pager{
     margin: 0 auto; 
     display: table; (ife the first line above alone did not work...)
}

将此代码放在任何其他 .pager 引用代码之后 此外，删除 .pager 类上的任何填充