Question

我想在我的3张图片上面标注＆＃34;员工精选＆＃34;。我不明白为什么但是由于某种原因它在标题之下而不是在下面。请帮助我知道它的基本但通常它下面。

正文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

尝试在<h1>

之前使用<div>

Answer 3

图像并非完全位于页面中心。你可以通过在container_index里面的图像组周围添加另一个div来解决这个问题，然后给它：

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

然后从.container_index img中删除display属性，并将宽度从html移动到.container_index img。下面是一个示例：https://jsfiddle.net/ryp9d1dj/（来自pschueller的解决方案以及重叠的h1和nav。修复后添加的不同图像没有正确显示损坏的图像图标。）

如何在我的标题下面制作文字？

3 个答案: