问题：把两个a标签按钮 垂直居中，并且分别把两个按钮放在水平左右两边顶部1，祖父元素设定：position:relative2，把.arrow 设定上下垂直居中 position:absolute; top:50%; margin-top:-20px;3，因为父级元素已经进行垂直居中定位，所以，只要把 a 标签进行左右定位即可 a标签公共样式.item{ position:absolute;} 这里如果设置left:0，那么.right设置right:0;就无效，如果同时设置:left:0 和 right:0 会先执行left先。 所以这里不设置，直接到.left 和 .right中各自设置left:0; 和 right:0;最合适4，.left { left:0 } .right { right:0 }==============================读取雪碧图中的指定图片： 公共样式 .item 设置了背景图片： background: url('../img/ui-slider-arrow.png') no-repeat 0 0;如果有多个 .item 需要设置，那么直接修改background-position: 0 -20px; 即可。雪碧图的读取基本都是负数坐标。============================== <!----对 两个 a 标签定位在 .container 的上下垂直居中，并且两个a标签一个定位在左，一个定位在右边 ----> <div class="container" style="position:relative; width:600px;height:600px;"> <div class="arrow"><!----a 标签是图片轮播的前后按钮,宽高都是40px----> <a class="left item" href="#l"></a> <a class="right item" href="#r"></a> </div> </div><!----下面是样式---->.container { width: 545px; height: 413px; position: relative; } .arrow { position: absolute; top: 50%; margin-top: -20px; height: 40px; width: 545px; } .arrow .item { position: absolute; width: 40px; height: 40px; display: inline-block; background: url('../img/ui-slider-arrow.png') no-repeat 0 0; }.left { left: 0; background-position: -40px 0; }
.right { right: 0; background-position: -40px 0; }
