Question

我想在响应式div中将文本垂直居中，但如果没有新的CSS3技巧，我真的找不到这样做的方法..

.iosSlider {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
/* slider */
.iosSlider .Slider {
    width: 100%;
    height: 100%;
}
/* slide */
.iosSlider .Slider .Slide {
    float: left;
    width: 100%;
}
.iosSlider .Slider .Slide img{
    width: 100%;
    height: auto;
} 
.slider-prevContainer {
    position: absolute;
    top: 0;
    left: 10px;
    width: 50px;
    height: 50%;
    color: #595e62;
    text-align: center;
}
.slider-nextContainer {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    opacity: 1;
    color: #595e62;
    background: blue;
}
.slider-next {
    position:absolute;
    height: 50%;
    width: 100%;
    top: 25%;
    text-align: center;
    vertical-align: middle;
    background: red;
    box-sizing: border-box;
    font-size: 50px;
}


#single-slider {
    float: left;
    width: 500px;
    height: 500px;
    min-width: 0;
    margin: 0;
    border: none;
    background: #000;
}

Answer 1

好的，我想我有一个解决方案。

调整后的HTML：

<div class="slider-next">
   <div id='slider-next-inner'>
      >
   </div>
</div>

添加了CSS：

#slider-next-inner{
   position:relative;
   top:50%;
   margin-top:-30px;
   /* Margin-top is 1/2 the elements height (currently it is 59px) */
}

链接：http://jsfiddle.net/M8rwn/18/

css垂直对齐文本内部绝对响应div

1 个答案: