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

标签 css vertical-alignment

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

这里有一个 fiddle :http://jsfiddle.net/M8rwn/

.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;
} 

最佳答案

好吧,我想我有一个解决方案。

调整后的 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内的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16951763/

相关文章:

html - Safari 渲染谷歌字体海量

android-studio - Android Studio 0.8.2:删除垂直换行

html - 图像中心对齐 - 有效但不完美

jquery - 如何摆脱对话框周围丑陋的白线?

html - 在我的内容之后添加一个间距 div。如何阻止我的内容 div 越过底部间距 div?

javascript - 带回调的 Jquery/CSS 顺序元素动画

css - Safari 浏览器不支持伪元素的过渡?

html - 如果太长,行内 block div 中的段落将推到 div 下方

jquery - 如何使用 jquery 格式化阿拉伯语诗歌?

html - 如果左侧的另一个 div 导致它们堆叠,则垂直对齐右侧的 div