How to postion text above images in HTML and CSS

Question

I have a question in which I can't find answer or don't know how to search for answer.

I don't know how to position text above image in a way that I want them to align. The following image will clarify what I am asking.

Next is my HTML and CSS code, I only provided the HTML for about page, but CSS is for the whole website. This isn't anything professional, I am just trying to learn by doing. My idea is to use those images as links ( I know how to do that ). If there is similar question already asked, I apologize, I tried searching here and on YouTube, but could not find solution for this problem. If nothing I will edit pictures in GIMP with text in them.

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

You can use figure and figcaption to have text and an image aligned with each other.

I've used flex to make sure everything lines up how it should.

.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>

Answer 2

Please check with this snippet

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>

Answer 3

First you should wrap image with div and add following style for that div

Example:

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

Try this.

Answer 4

wrap each image in div and before that add your text

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

Position your "a" depending on intended result. Now it only makes image to be link