如何在 HTML 和 CSS 中将文本放置在图像上方

Question

我有一个无法找到答案或不知道如何搜索答案的问题。

我不知道如何以我希望它们对齐的方式将文本放置在图像上方。下图将澄清我的要求。

接下来是我的 HTML 和 CSS 代码，我只提供了关于页面的 HTML，但 CSS 是针对整个网站的。这不是什么专业的事情，我只是想边做边学。我的想法是使用这些图像作为链接（我知道该怎么做）。如果已经有人问过类似的问题，我很抱歉，我尝试在此处和 YouTube 上搜索，但找不到此问题的解决方案。如果不出意外的话，我会在 GIMP 中编辑带有文本的图片。

body {
  background: #e5fcf4;
  font-family: Arial;
}

header {
  text-align: center;
}

header nav {
  display: inline-block;
}

header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header ul li {
  float: left;
  color: white;
  width: 200px;
  height: 40px;
  background-color: #0d3801;
  opacity: .9;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

header ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

header ul li a:hover {
  background-color: green;
  color: black;
}

header ul li ul li {
  display: none;
}

header ul li:hover ul li {
  display: block;
}

div.maincontent {
  width: 70%;
  padding: 2px;
  margin: 2px;
  float: left;
}

div.sidecontent {
  width: 23%;
  float: right;
  padding: 2px;
  margin: 2px;
  margin-top: 10px;
}

div.maincontent img {
  width: 900px;
  height: 400px;
}

.clear {
  clear: both;
}

footer {
  background-color: #0d3801;
  text-align: center;
}

footer img {
  width: 200px;
  height: 200px;
  margin: 5px;
}

footer h2 {
  font-size: 2rem;
  color: white;
}

img.aboutimage {
  width: 450px;
  height: 400px;
  float: left;
  padding: 5px;
  margin-left: 125px;
  margin-top: 100px;
}

<header>
  <nav>
    <ul>
      <li> <a href="index.html">Home </a> </li>
      <li> <a href="about.html">About </a>
        <ul>
          <li><a> Our team  </a></li>
          <li><a> Camp sites  </a></li>
          <li><a> Mission &amp; Vision   </a></li>
        </ul>
      </li>
      <li> <a href="things.html">Things to do </a>
        <ul>
          <li><a> Activities  </a></li>
          <li><a> Parks  </a></li>
          <li><a> Coffee bars    </a></li>
        </ul>
      </li>
      <li> <a href="contact.html"> Contact  </a>
        <ul>
          <li><a> Map  </a></li>
          <li><a> Directions  </a></li>
        </ul>
      </li>
      <li> <a href="news.html"> News </a> </li>
    </ul>
  </nav>
</header>

<div>
  <a href="">
    <img class="aboutimage" src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
  </a>
  <a href="">
    <img class="aboutimage" src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
  </a>
  <a href="">
    <img class="aboutimage" src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
  </a>
</div>

Answer 1

将每个图像包装在 div 中，然后添加文本

<div >
    <div style="width: 33%; float: left">
        <h3>sample title</h3>
        <a href="">
            <img class="aboutimage">
        </a>
    </div>
    ...
</div>

根据预期结果放置“a”。现在它只使图像成为链接