Question

我有几个嵌入了imgs的div。我想在这些div中放置文本，但文本应在图像上方。所以我写了下面的代码：

#headline-div {
z-index:100;
position:absolute;
text-align: center;
}
#divbgs1 {
z-index:1;
position:relative;
} 

<div id="headline-div">
<span>Willkommen auf den Rook Islands...</span>
</div>
<div class="divbgs1">
<img src="/img/rook/img/flying.jpg"/>
</div>

但现在文字留给了图片，我无法居中。链接到该页面：http://bit.ly/1i7j47A

亲切的问候

Answer 1

首先，您的html中有class="divbgs1"，但在您的CSS中，您放了#divbgs1而不是.divbgs1。我打算假设你想成为一个班级。

.divbgs1 {
    text-align: center;  //add this
    z-index: 1;          //remove this
    position: relative;
    padding: 10px;       // you might want to add a padding, adjust accordingly
}

.divbgs1 img {
     position: absolute;
     top: 10px; //adjust these accordingly
     left: 10px; //adjust these accordingly
}

Answer 2

您可以将#headline-div放在div中的图像中，如此

<div id="divbgs1">
    <div id="headline-div">
        <span>Willkommen auf den Rook Islands...</span>
    </div>
    <img src="/img/rook/img/flying.jpg">
</div>

然后绝对定位#headline-div就像这样

#headline-div {
  z-index: 100;
  position: absolute;
  text-align: center;
  width: 100%;
  margin-top: 50%;
}

或

你可以添加

#headline-div {
   width: 100%;
}

水平居中文本，垂直居中需要更多的努力。

z-index比下图（CSS）更高的中心文本

2 个答案: