Is it possible to center text in a table with an image and have them both be a link?-CodePudding

I would like to have the table image and text vertically and horizontally centered in the same cell. I've tried text-align and vertical-align, but the text will just display before or after the image. The trick is that I want the image and the text to also be a link. Can the text be set to be in the center of the cell with the image like this example?

Example

th {
text-align: center;
vertical-align: middle;
}

<table style="width:100%;">
  <tr>
<th style="width:33.33%;"><a href="#"><img src="https://www.w3schools.com/HOWTO/img_snow_wide.jpg" alt="alt" style="width:100%"></a>CENTER</th>
<th style="width:33.33%;"><a href="#"><img src="https://www.w3schools.com/HOWTO/img_snow_wide.jpg" alt="alt" style="width:100%"></a>CENTER</th>
<th style="width:33.33%;"><a href="#"><img src="https://www.w3schools.com/HOWTO/img_snow_wide.jpg" alt="alt" style="width:100%"></a>CENTER</th>
  </tr>
</table>

CodePudding user response：

Probably you are talking about background image and background size property here as:

th {
    background-image: url(https://www.w3schools.com/HOWTO/img_snow_wide.jpg);
    background-size: contain;
    font-size: 24px;
    font-weight: bold;
  }

working code: https://codesandbox.io/s/pensive-panna-qbnkut?file=/index.html:345-531

Other way is to position absolute a div containing text at the center of the 'th' element and use 'img' element as you used now.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      table {
        width: 100vh;
        height: 50vh;
        margin: 0 auto;
      }
      th {
        background-image: url(https://www.w3schools.com/HOWTO/img_snow_wide.jpg);
        background-size: contain;
        font-size: 24px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>
          CENTERED Text
        </th>
      </tr>
    </table>
  </body>
</html>

CodePudding user response：

If you want to add the image and text content on the table head then only use <th> tag otherwise it is good to use <td> tag inside <tr> for semantic meaning as <td> tag represent table data.