Aligning 3 images in the same line (with a title above them) in HTML

Jo227oG243es
July 4, 2023
158 views
4 votes
4 Answers

I was testing many options using CSS and HTML, but the closest I got of solving this problem was using HTML tables to align the images in the same line with their titles above each of them.

I did this:
`

<table>
<td>
    <font color="white">Security</font><br><img src="security.png" width="100" height="100"><br><br>
</td>

<td>
    <font color="white">UI/UX</font><br><img src="hacker.png" width="100" height="100"><br><br>
</td>

<td>
    <font color="white">Cloud Technologies</font><br><img src="secret-file.png" width="100" height="100"><br><br>
</td>

<td>
    <font color="white">Identity and Access Management</font><br><img src="face-recognition.png" width="100" height="100"><br><br>
</td>

<td>
    <font color="white">Software Engineering</font><br><img src="bug.png" width="100" height="100"><br><br>
</td>

<td>
    <font color="white">Cyber Intelligence</font><br><img src="hacking (1).png" width="100" height="100"><br><br>
</td>
</table>

I know you will suggest using CSS, but every CSS thing I tested, failed miserably, like flex box, float, etc. The problem with this solution is that I need like 3 or 4 images per line. Another problem is that this solution made the text above the image extremely close to each other (not centralized).

I tried using table and it was the closest I could do.
Other attempts was trying this: https://www.w3schools.com/howto/howto_css_images_side_by_side.asp but had no success with the text above the images. Also tried <figure style = "margin-left: 20%">, <figure style = "margin-left: 40%"> and <figure style = "margin-left: 60%"> but they didn’t get to be in the same line.

Tags: css html

Answers

I would put the title and image in a single div like this:

<div class="container">
  <div>
    <font color="white"> Security </font>
    <img src="security.png" width="100" height="100" />
  </div>
  <div>
    <font color="white"> Security </font>
    <img src="security.png" width="100" height="100" />
  </div>
  <div>
    <font color="white"> Security </font>
    <img src="security.png" width="100" height="100" />
  </div>
  #etc.....
</div>

And then flex them in a css:

.container {
  display: flex;
}

Let me know if this works

I would recommend you to enhance your skills in using grid systems. Those can be very helpful in Situations like yours rn.

What you could also try if you really want to use a table is:

<table>
  <thead>
    <th><font color="white">Security</font></th>
    <th><font color="white">UI/UX</font></th>
    <th><font color="white">Cloud Technologies</font></th>
    <th><font color="white">Identity and Access Management</font></th>
    <th><font color="white">Software Engineering</font></th>
    <th><font color="white">Cyber Intelligence</font></th>
  </thead>
  <tbody>
    <td><img src="security.png" width="100" height="100"></td>
    <td><img src="hacker.png" width="100" height="100"></td>
    <td><img src="secret-file.png" width="100" height="100"></td>
    <td><img src="face-recognition.png" width="100" height="100"></td>
    <td><img src="bug.png" width="100" height="100"></d>
    <td><img src="hacking (1).png" width="100" height="100"></td>
  </tbody>
</table>

It would be cleaner if you’d either add your CSS style Tags to a class / the element itself due to repitition in each img element shown here. Same for your font element. you could just make white then.

You can do that using CSS Flexbox

.image-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

.image-wrapper {
  margin: 10px;
}

.image-wrapper h3 {
  margin-top: 0;
}

.image-wrapper img {
  max-width: 100%;
  height: auto;
}

<!DOCTYPE html>
<html>

<body>
  <h2>Title Above Images</h2>
  <div class="image-container">
    <div class="image-wrapper">
      <h3>Title 1</h3>
      <img src="https://via.placeholder.com/150" alt="Placeholder Image 1">
    </div>
    <div class="image-wrapper">
      <h3>Title 2</h3>
      <img src="https://via.placeholder.com/150" alt="Placeholder Image 2">
    </div>
    <div class="image-wrapper">
      <h3>Title 3</h3>
      <img src="https://via.placeholder.com/150" alt="Placeholder Image 3">
    </div>
    <div class="image-wrapper">
      <h3>Title 4</h3>
      <img src="https://via.placeholder.com/150" alt="Placeholder Image 4">
    </div>
    <div class="image-wrapper">
      <h3>Title 5</h3>
      <img src="https://via.placeholder.com/150" alt="Placeholder Image 5">
    </div>
  </div>
</body>

</html>

This is using CSS Grid for the layout. The <figure> tag is used for the image content and the <figcaption> for the image title.

body {
    font-family: Helvetica, sans-serif;
}
    
#pictures {
    padding: 10px 0px; 
}

#pictures h1 {
    text-align: center;
}

.pic1 {
    grid-area: area-1;
}
.pic2 {
    grid-area: area-2;
}
.pic3 {
    grid-area: area-3;
}

.pictures-grid {
    display: grid;
    grid-gap: 40px;
    padding: 25px;
    grid-template-areas: "area-1 area-2 area-3";
}

.pictures-grid figure {
    margin: 0px;
    text-align: center;
}

.pictures-grid img {
    height: 250px;
}

.pictures-grid figcaption {
    font-weight: bold;
    text-align: center; 
    padding: 10px 0px; 
    background-color: lightgray;
}

<body>
    <div id="pictures">

        <h1>These are some of my pictures</h1>
    
        <div class="pictures-grid">     

                <figure class="pic1">
                    <figcaption>Security</figcaption><br>
                    <img src="1.jpg" alt="Security">
                </figure>
            
                <figure class="pic2">
                    <figcaption>Cloud Technologies</figcaption><br>
                    <img src="2.jpg" alt="Cloud Technologies">
                </figure>   

                <figure class="pic3">
                    <figcaption>Software Engineering</figcaption><br>
                    <img src="3.jpg" alt="Software Engineering">
                </figure>

        </div>
    </div>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.