Center HTML Table Cell Content

Question

I want to create an HTML table and I want its cells to be clickable. I have achieved that however, I can't vertically align text to middle in the cell. vertical-align:middle seems not working.

Here is my code:

<style type="text/css"> td { width: 200px; border: solid 1px green; height: 100%; text-align: center; vertical-align: middle; } td a { display: inline-block; height:100%; width:100%; } td a:hover { background-color: yellow; } </style> <table> <tbody> <tr> <td> <a href="http://www.google.com/">Cell 1<br> second line</a> </td> <td> <a href="http://www.google.com/">Cell 2</a> </td> <td> <a href="http://www.google.com/">Cell 3</a> </td> <td> <a href="http://www.google.com/">Cell 4</a> </td> </tr> </tbody> </table>

Can you help me with that?

Thank you!

A simple google suggested display:table-cell, along with your vertical-align, if your tables were wrapped in a div at least..at which case you'd have to id the div and put the relevant CSS there. — MathBio
– MathBio, Commented Feb 7, 2016 at 11:15
@MathBio When I use display:table-cell, it makes only the text clickable. In my case, I want entire cell to be clickable. — Kalen Hourna
– Kalen Hourna, Commented Feb 7, 2016 at 11:22
The solution given by Ashish Patel below seems to do what you want it to. — MathBio
– MathBio, Commented Feb 7, 2016 at 11:57
Posted an answer for you. Do you really need the table element? ... If it can be done without, would that be an option? — Asons
– Asons, Commented Feb 7, 2016 at 12:18

Asons · Accepted Answer · 2016-02-07 12:26:35Z

The simplest way is to add a span to the anchors text like this

td { width: 200px; border: 1px solid green; height: 100%; text-align: center; vertical-align: middle; position: relative; } td a { display: inline-block; width: 100%; height: 100%; } td a span { position: relative; display: inline-block; top: 50%; transform: translateY(-50%); } td a:hover { background-color: yellow; }

<table> <tbody> <tr> <td> <a href="http://www.google.com/"><span>Cell 1<br> second line</span></a> </td> <td> <a href="http://www.google.com/"><span>Cell 2</span></a> </td> <td> <a href="http://www.google.com/"><span>Cell 3</span></a> </td> <td> <a href="http://www.google.com/"><span>Cell 4</span></a> </td> </tr> </tbody> </table>

A more modern way to make a table, if you are able to alter the markup a little, would be like this.

.wrapper { display: table; } .wrapper a { display: table-cell; width: 200px; border: 1px solid green; height: 100%; text-align: center; vertical-align: middle; } .wrapper a:hover { background-color: yellow; }

<div class="wrapper"> <a href="http://www.google.com/">Cell 1<br> second line</a> <a href="http://www.google.com/">Cell 2</a> <a href="http://www.google.com/">Cell 3</a> <a href="http://www.google.com/">Cell 4</a> </div>

Ashish Patel · Accepted Answer · 2016-02-07 11:36:29Z

Use this for right solotion

 td { border: 1px solid green; display: table; float: left; height: 100%; text-align: center; vertical-align: middle; width: 200px; } td a { display: table-cell; float: none; height: 100%; text-align: center; vertical-align: middle; width: 100%; }

Collectives™ on Stack Overflow

Center HTML Table Cell Content

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related