不能垂直对齐绝对跨度

Question

我正在尝试将导航定位在容器的中间位置，但我还做不到。我正在使用 span 进行导航。

我已将父容器定位为推荐的相对位置，然后使用顶部、右侧和左侧将位置分配给 span。

img{
    max-width:600px;
}
.slider{
    position: relative;
    margin: 0 auto;
    /*overflow: hidden;*/
    width: 100%;
}
.slider ul{
    /*white-space: nowrap;*/
    list-style: none;
    padding: 0;
    position: relative;
}

.slider ul li{
    margin-right: -4px;
    width: 100%;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
}

.slider ul li.active{
    display: list-item;
}

/*Navegacion*/
.flechas-nav .anterior, .flechas-nav .siguiente{
 position: absolute;
 cursor: pointer;
}

.flechas-nav .anterior {
 
 top: 50%;
}

.flechas-nav .siguiente{
 right: 0;
 top: 50%;
}
.flechas-nav span {
 height: 100%;
 width: 10%;
 opacity: 0;
 position: absolute;
 z-index: 900;
}

.slider:hover .flechas-nav span {
 opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="slider">
            <ul class="slider-contenedor">
                <li class="slide active">
                    <img class="img-responsive" src="http://i.imgur.com/Khgz4Qd.jpg" alt="">
                    
                </li>
                <li class="slide">
                    <img class="img-responsive" src="http://i.imgur.com/Dc3XS7w.jpg" alt="">
                    
                </li>
                <li class="slide">
                    <img class="img-responsive" src="http://i.imgur.com/aVzLCnM.jpg" alt="">
                </li>
            </ul>
   <div class="flechas-nav">
    <span class="anterior">Left</span>
    <span class="siguiente">Right</span>
   </div>
   </div>
        </div>
    </div>

我把 demo 放在了 jsfiddle 上。

如何将此 span 置于垂直中间？

Demo

Answer 1

试用演示：http://jsfiddle.net/17ow14kf/2/

img{
    max-width:600px;
}

.slider {
    height: 210px;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
.slider ul{
    /*white-space: nowrap;*/
    list-style: none;
    padding: 0;
    position: relative;
}

.slider ul li{
    margin-right: -4px;
    width: 100%;
    position: absolute;
    display: none;
    top: 0;
    left: 0;
}

.slider ul li.active{
    display: list-item;
}

/*Navegacion*/
.flechas-nav .anterior, .flechas-nav .siguiente{
    position: absolute;
    cursor: pointer;
}

.flechas-nav .anterior {

    top: 50%;
}

.flechas-nav .siguiente{
    right: 0;
    top: 50%;
}
.flechas-nav span {
    height: 100%;
    width: 10%;
    opacity: 0;
    position: absolute;
    z-index: 900;
}

.slider:hover .flechas-nav span {
    opacity: 1;
}
.flechas-nav {
    height: 50px;
    margin-top: -25px;
    position: absolute;
    top: 50%;
    width: 100%; color:#fff;
}
.flechas-nav .anterior {
    left: 0;
    top: 50%;
}

Answer 2

您的 CSS 中存在一些问题。一方面，当使用 position:absolute 时，它将元素从文档流中移除。您的图像和文本都被定位为绝对。因此您的文档中没有注册高度或宽度。这就是 top: 50% 不起作用的原因。因此，首先从 .slider ul li

中删除定位

.slider ul li{
   margin-right: -4px;
   width: 100%;
   /*position: absolute;*/ //remove
   display: none;
   /*top: 0;*/ //not needed anymore
   /*left: 0;*/ //not needed anymore
}

现在 top:50% 可以工作，单词 "left" 和 "right" 看起来会居中。还有一些事情：

接下来，您的 div 容器默认为 display: block，因此它们占用文档的宽度。由于您的图像不是 width:100% 容器太大并且 "right" 一词将消失，因为图像不够宽。（查看您的演示和 user4429928 的回答 - 将屏幕调大，"right" 似乎会消失）。您可以将容器设置为 display: inline-block 以包裹图像：

.container{
   display: inline-block;
}

现在，我将从 .anterior 和 .siguiente 中删除绝对定位，并将定位添加到父级并浮动子级：

.flechas-nav{
   width: 100%;
   position: absolute;
   top: 50%;
   color: #FFF;
   transform: translateY(-50%); //read note below about this
}

.flechas-nav .anterior {
   float: left;
}

.flechas-nav .siguiente{ 浮动：对；文本对齐：右； }

调用 top:50% 实际上并没有使元素居中，而是将其定位在距离顶部 50% 的位置。在这种情况下，因为您的文字高度很小，看起来还不错，但如果您添加了 height: 200px 或其他内容，您会发现它实际上并未居中。要更正此问题，您可以使用：

transform: translateY(-50%);

现在您的内容居中并位于其父项内。要解决图像旋转问题，您可以将淡出的图像设置为 absolute，将淡出的图像设置为 static:

不能垂直对齐绝对跨度

Cannot vertical align absolute span

html

css

position

css-position

FIDDLE