如何在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>

- Matija

---

只需在每个a标签上方添加<h1>Hello There</h1>即可。 - Athul Nath

Answer 1

将每个图像都包装在div中，并在此之前添加您的文本。

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

根据预期结果定位您的 "a"。现在它只会使图像成为链接。

- NoOorZ24

---

还要注意的是，div的样式取决于您，因为我不知道您的目标是什么，我只是提供一个示例。 - NoOorZ24

@NoOorZ24 谢谢，这个很好用。简单的解决方案居然如此有效，真是让人难以置信。 - Matija

@Matija，优秀的编程在于简洁易懂（这也适用于 HTML 和其他创建代码的领域）。 - NoOorZ24

Answer 2

请查看以下代码片段：

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

header {
  text-align: center;
}

header nav {
  display: inline-block;
}


/* PRVI KORAK*/

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


/*DRUGI KORAK*/

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;
}


/*TREĆI KORAK*/

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


/*ČETVRTI KORAK*/

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


/*PETI KORAK*/

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;
}


.img-block a{
  position:relative;
}
.img-block a span{
  position:absolute;
  width:100%;
  top:0;
  left:0;
  background:rgba(0,0,0,0.5);
  padding:5px;
  font-size:14px;
  color:#fff;
  font-weight:700;
  text-align:center;
  
}
.img-block img{
  padding:0;
  width:100%;
  margin:0;
  height:auto;
}
.img-block a{
  overflow:hidden;
  float:left;
  width:calc( 33.33% - 20px );
  margin:0 10px;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <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 class="img-block">
    <a href=""> 
        <span>Text1</span>
        <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=""> 
            <span>Text2</span>
        <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=""> 
            <span>Text3</span>
         <img class="aboutimage" src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"> 
    </a>
  </div>




</body>

</html>

- Geo George

Answer 3

您可以使用figure和figcaption使文本和图像对齐。

我使用了flex来确保一切都对齐。

.imageblock {
  display: flex;
  justify-content: space-between;
}

.imageblock figure {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  width: 30vw;
  margin: 0;
}

.imageblock figure * {
  width: 100%;
}

<div class="imageblock">
  <figure class="aboutimage">
    <figcaption>How to add text here?</figcaption>
    <img src="https://images.pexels.com/photos/7097/people-coffee-tea-meeting.jpg?w=1260&h=750&auto=compress&cs=tinysrgb">
  </figure>

  <figure class="aboutimage">
    <figcaption>How to add text here?</figcaption>
    <img src="https://images.pexels.com/photos/803226/pexels-photo-803226.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
  </figure>

  <figure class="aboutimage">
    <figcaption>How to add text here?</figcaption>
    <img src="https://images.pexels.com/photos/462353/pexels-photo-462353.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb">
  </figure>
</div>

- Andrew Bone

---

谢谢回答，我使用第一个答案作为解决方案，但现在我也知道了flex（需要更多学习，这是我第一次看到它）;) - Matija

Answer 4

首先，您应该使用div将图像包装起来，并为该div添加以下样式

例子：

<div style="width:33%; float:left">Sample Text</div>

试试这个。

- Vipin zithiz