FIDDLE

Question

我正试图将导航定位在容器的中间位置，但我还没有。我正在使用span进行导航。

我已将父容器定位为相对推荐的方式，然后使用top，right和left将位置指定给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>

我把演示放在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%将起作用，“左”和“右”这两个词似乎会居中。还有一些事情：

接下来，您的div容器默认为display: block，因此它们占用文档的宽度。由于您的图片不是width:100%，因此容器太大而“右”字会消失，因为图片不够宽。（看看你的演示和user4429928的答案 - 让屏幕变大，“正确”似乎会消失）。您可以将容器设置为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 { 漂浮：对; text-align：right; }

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

transform: translateY(-50%);

现在，您的内容位于其父级内部。要解决图像旋转问题，您可以设置淡出到absolute的图像和进入static的图像：

FIDDLE

Answer 2

尝试演示：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%;
}

无法垂直对齐绝对跨度

2 个答案:

FIDDLE