html - 不能垂直对齐绝对跨度

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

您的 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% 容器太大并且“正确”一词将消失，因为图像不够宽。 (查看您的演示和 user4429928 的回答 - 将屏幕调大，“正确”似乎会消失)。您可以将容器设置为 display: inline-block 以包裹图像:

.container{
   display: inline-block;
}

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

.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{ float :对； 文本对齐:右；

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

transform: translateY(-50%);

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

FIDDLE