Question

我在调整两个元素时遇到了问题。我希望在我的两个迷你内容滑块的导航箭头中间对齐。

我需要的设计示例：

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

当前在制品在线直播网站 - 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

请与我css更新css您将获得所需的结果： -

<强> CSS

#slider1 .pager, #slider2 .pager {
    list-style: none outside none;
    margin: 0 0 0 45px;
    overflow: hidden;
    position: relative;
    top: -23px;
}

Answer 2

Float left＆amp; right分别为导航箭头，并从第二个删除left: 130px;。

设置相等left＆amp; right上的ul.pager保证金，在其上设置text-align: center并提供li display:inline-block

Answer 3

设置

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

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

上的任何填充

Answer 4

您甚至可以将分页对齐

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><a href="#">2</a><a href="#n">3</a><a href="#">4</a>
</div>

CSS定位辅助导航内容滑块

4 个答案: