What is the best way to create a stylish table of images with text overlaid on each image using HTML and CSS?

Question

What is the best way to create a stylish table of images with text overlaid on each image using HTML and CSS?

Currently working on developing a website, and I am in the process of creating a panel consisting of images accompanied by text overlaid on each image. Initially, my approach involved using a <table>, but to my surprise, adding <p> tags resulted in the images stacking into one column rather than maintaining their table format.

Even experimenting with positioning the <p> elements as absolute did not yield the desired outcome.

I am seeking advice on how to successfully link each <p> element to the center of its corresponding image while preserving the original table layout. Any suggestions or insights are highly appreciated!

html css image web

Answer 1

Answer №1

To utilize tables instead of divs, consider using the following code to center text over each image in every table cell:

<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<table >
<td class="container">
  <img src="image.jpg" alt="" style="width:100%;">
  <div class="centered">Centered</div>
  </td>

  <td class="container">
  <img src="image.jpg" alt="" style="width:100%;">
  <div class="centered">Centered</div>
  </td>

    <td class="container">
  <img src="image.jpg" alt="" style="width:100%;">
  <div class="centered">Centered</div>
  </td>
</table>

</body>
</html>

Answer 2

To utilize tables instead of divs, consider using the following code to center text over each image in every table cell:

<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<table >
<td class="container">
  <img src="image.jpg" alt="" style="width:100%;">
  <div class="centered">Centered</div>
  </td>

  <td class="container">
  <img src="image.jpg" alt="" style="width:100%;">
  <div class="centered">Centered</div>
  </td>

    <td class="container">
  <img src="image.jpg" alt="" style="width:100%;">
  <div class="centered">Centered</div>
  </td>
</table>

</body>
</html>

What is the best way to create a stylish table of images with text overlaid on each image using HTML and CSS?

Answer №1

Similar questions

Is it considered a bad practice to apply overflow: auto to all elements with the exception of html?

Steps for Deactivating HTML Links

The page transition on Android lacks fluidity

How to change the video source on Internet Explorer

A guide on sending JavaScript variables to PHP using AJAX

JavaScript - Reveal a div when a grid item is clicked

Struggling to properly center my logo vertically

Customizing Material UI - Overrides in MakeStyles

Navigate to a hyperlink using an HTML tag on an Android device

What is the best way to align a bootstrap 5 iframe in the center?

Excessive Bootstrap row reaches beyond its containing div

What is the best way to prevent scrolling in one column while allowing another column to scroll normally?

Issue with Materialize CSS 'select' not functioning correctly when integrated with Django framework

Using AngularJS to incorporate personalized font icons

Setting the height of a span element to 100% within a table using

Only display one div element when in print mode, hiding all others

Could Chrome be miscalculating em unit values in media queries?

When JavaScript and HTML combine, they create overlapped audio

When fetching data from a parse object, JavaScript displayed [object, Object] as the result

Improper transformation of raw RGB depth image into grayscale