如何在我的标题下方添加文字？答案

【问题标题】：how to make text below my heading?如何在我的标题下方添加文字？
【发布时间】：2015-04-05 00:24:40
【问题描述】：

我想在我的 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

【问题讨论】：

"...它位于标题下方而不是下方"。那些意思是一样的。此外，您的 HTML 中既不存在 h3 也不存在 header，因此无法判断您的错误是什么。如果您发布 jsfiddle 或 codepen 可能会有所帮助。
我现在试着做一个 js fiddle
html中有一个header标签，顺便说一下我没放进去
如果您编辑代码以包含所有 HTML，我可以更好地帮助您。
jsfiddle.net/248m822a

标签： html css header position alignment

【解决方案1】：

从您的标题中删除 position: absolute; 并查看是否可以修复它。通过绝对定位标题，它会从可能导致重叠的文档流中取出。

或者，您可以给 h3 元素一些填充/边距以补偿重叠...或您的标题，具体取决于具体情况。

【讨论】：

谢谢好主意。这使标题变小了很多，并将导航栏从标题中取出。如果你明白我的意思。虽然 h3 已经向下移动了一点点，但它仍然有点重叠。
这是您要找的吗？ jsfiddle.net/248m822a/1我给body标签一些顶部填充。
我的图像不在 jsfiddle 中，所以您不会理解，但我希望标题与图像的宽度相同，并直接位于中间图像上方。我的宽度都排序为 30%，但我不能让它坐在中间图像的正上方
@user3774020 你是对的，我不确定你的目标是什么，但它可能有助于将 <h3> 元素移动到具有 3 个图像的容器内，然后给它30% 的宽度……这会让你更接近吗？ jsfiddle.net/248m822a/7

【解决方案2】：

图片未完全居中在页面上。您可以通过在 container_index 内的图像组周围添加另一个 div 并给出它来解决此问题：

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

然后从 .container_index img 中删除 display 属性，并将宽度从 html 移动到 .container_index img。以下是它的外观示例：https://jsfiddle.net/ryp9d1dj/（从 pschueller 对重叠 h1 和导航的修复分叉。添加了不同的图像，因为修复无法正确显示损坏的图像图标。）

【讨论】：

【解决方案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%;
}

【讨论】：