Menu
My wish is simple - to make a clickable cell (i.e. cell with a link) with a minimum height requirement (40 px in this case) ant vertically centered text. Here's what I come up with so far:
<html>
<head>
<style>
table.test td {
border:1px solid black;
width: 200px;
height: 100%;}
table.test td.cell a {
background-color: #FFF5EE;
display:inline-block;
height:100%; width:100%;
min-height: 40px;}
table.test td.cell a:hover, td.cell a:active {
background-color: #D2691E;}
</style>
</head>
<body>
<table class="test">
<tr>
<td class="cell"><a href="www.google.lt">Google</a></td>
<td>Line1</td>
</tr>
<tr>
<td class="cell"><a href="www.google.lt">Google</a></td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>
</table>
</body>
</html>
Everything's ok, but I can't get the text aligned (centered) vertically :/ The vertical-align property doesn't work in this case.
Here's the example in action (link).
258
Remove the line
height: 100%;
from
table.test td.cell a { ... }
and add
vertical-align: middle;
to
table.test td { ... }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
