CODEWITHSUNDEEP
htmlcsshtml-table
user9249887
user9249887

Reputation:

Hyperlink Table Cell Text not Centered

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:

enter image description here

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!

Upvotes: 1

Views: 77

Answers (4)

satyajit rout
satyajit rout

Reputation: 1651

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>

Upvotes: 1

facebook-100001703052904
facebook-100001703052904

Reputation: 9

use this:

td a{text-align: justify;}

Upvotes: 0

Tanner Babcock
Tanner Babcock

Reputation: 3360

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.

Upvotes: 0

Bhuwan
Bhuwan

Reputation: 16855

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>

Upvotes: 1

Related Questions