Question

我有一个image滑块，我想在每张图片的align和text中horizontal一些解释性vertical centre。

我怎样才能在HTML / CSS中实现这一目标？

这是我的滑块：jsbin //注意我编辑了你的jsbin - 现在文字可见，问题清晰。

Answer 1

您可以创建一个类似于：

的CSS类

display:block;
line-height:*same as your slider height*;
margin:0 auto;
position:relative;
z-index:99;

并放入滑块内。必须对CSS进行一些调整，但基本的想法仍然存在。

Answer 2

使用以下HTML和CSS

<article>
<div class="text">hihihi</div>
<img alt="an interesting rock" src="http://placehold.it/300x300/123456/000000/&text=1">
</article>



.text {
    color: white;
    height: 300px;
    position: absolute;
    top: 47%;
    width: 100%;
}

#slides article {
    float: left;
    position: relative;
    width: 25%;
}

Answer 3

您需要做两处更改。

将position:relative添加到父级。

#slides article
{
  width:25%;
  float:left;
  position:relative;
}

将位置（上，左，下，右）添加到text课程。

 .text
 {
   position:absolute;
   display:table;
   width:100%;
   color:#fff;
   height:30px;
   top:0;
   bottom:0;
   right:0;
   left:0;
   margin:auto;
 }

display:table属性并使用height修复一些小的margin:auto将会有所作为。

FIDDLE DEMO

对齐图像滑块中心的文本

3 个答案: