Hyperlink Table Cell Text not Centered

Question

I'm trying to make an entire cell of my table clickable and I've tried just about every solution I found here except whenever my table cell is finally a hyperlink, the text just will not center no matter what I do and I could use some help.

Here's my html:

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

td a {
  color: #333;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
}

<table align="center" border="1">
  <tr>
    <td><a href="#">home</a></td>
  </tr>
</table>

And here's the CSS for it:

And here's a visual of what it looks like:

Sorry if this is something that's been asked and answered, I just personally couldn't find a solution on here after three days of searching. Thanks to anyone that helps!

Searching far less than three days got me: [This](https://stackoverflow.com/questions/10070232/how-to-make-a-cell-of-table-hyperlink), [this](https://stackoverflow.com/questions/3337914/how-can-i-make-a-link-from-a-td-table-cell) and [this](https://stackoverflow.com/questions/3966027/make-link-in-table-cell-fill-the-entire-row-height/3966257#3966257). — SpazzMarticus, Jan 22 '18 at 06:20
Possible duplicate of [Make link in table cell fill the entire row height](https://stackoverflow.com/questions/3966027/make-link-in-table-cell-fill-the-entire-row-height) — SpazzMarticus, Jan 22 '18 at 06:21

Bhuwan · Answer 1 · 2018-01-22T06:30:31.293

No need to use flex here. Just set display:block to your anchor tag and add some padding for spacing.

Stack Snippet

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

td a {
  color: #333;
  display: block;
  padding: 20px;
  text-align: center;
}

<table align="center" border="1">
  <tr>
    <td><a href="#">home</a></td>
  </tr>
</table>

score 1 · Answer 2 · answered Jan 22 '18 at 08:41

use align-items: center; in anchor tag

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

td a {
  color: #333;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

<table align="center" border="1">
  <tr>
    <td><a href="#">home</a></td>
  </tr>
</table>

score 0 · Answer 3 · answered Jan 22 '18 at 06:56

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
}

td a, td a:link, td a:hover {
  display:block;
  color: #333;
  padding:40px;
  text-align:center;
  justify-content:center;
}

<table align="center" border="1">
  <tr>
    <td><a href="#">home</a></td>
  </tr>
</table>

This should work for you. You don't need to break out the flexbox, and you don't need to make the td a width:100% height:100%. If you just set those properties for the table, the td a will stretch.

score 0 · Answer 4 · answered Jan 22 '18 at 07:08

0

use this:

td a{text-align: justify;}

answered Jan 22 '18 at 07:08

facebook-100001703052904

9
1
3

Hyperlink Table Cell Text not Centered

4 Answers4