如何在标题下显示文字？

Question

[我想在我的3张图片上方添​​加标题“工作人员精选”。我不明白为什么，但是出于某种原因，它放在标题的下方而不是下方。请帮助我知道它的基本知识，但通常会在下面出现。

正文HTML

<div class = "container_index">
<img src = "eag.jpg" width = "30%">
<img src = "thewall.jpg" width = "30%">
<img src = "em.jpg" width = "30%">
</div>

CSS

h3 {
  background-color: rgba(0,0,0,0.8);
  width: 15%;
  margin: 0 auto;
  padding: 0;
  color: white;
  font-size: 30px;
  text-decoration: underline;
  text-align: center;
  font-family: 'Raleway', sans-serif;
}

header {
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  padding: 2%;
  left:0;
  top:0;
  right:0
}

小提琴：http://jsfiddle.net/248m822a

Answer 1

从标题中删除position: absolute;，然后查看是否可以解决。通过绝对定位标题，可以将其从文档流中删除，这可能导致重叠。

或者，根据情况，可以给h3元素一些填充/边距以补偿重叠...或标题。

Answer 2

图像未在页面上完全居中。您可以通过在container_index内的图像组周围添加另一个div并将其命名为[

来解决此问题：

display: inline-block;
text-align: center;

然后从.container_index img中删除显示属性，并将宽度从html移至.container_index img。这是一个看起来像的例子：https://jsfiddle.net/ryp9d1dj/（从pschueller的修复程序分支到重叠的h1和nav。由于该修复程序无法正确显示损坏的图像图标，因此添加了不同的图像。）

Answer 3

也许拿出硬编码的宽度并尝试这个？

.container_index{
    margin: 5% auto;
  padding: 10px
  }
.container_index img {
    opacity: 0.7;
    width: 30%;
}

.container_index img:hover {
    margin-left: 0;
    opacity: 1;
    height: 40%;
}