Geek Answers Handbook

Cannot vertically align a link in a table cell

My desire is simple - to make a clickable cell (i.e. a cell with a link) with a minimum height requirement (in this case 40 pixels) ant vertically centered text. Here is what I came 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 is in order, but I can’t get the center alignment (center) vertically: / The property vertical-aligndoes not work in this case.

Here is an example in action ( link ).

+5
source share
6 answers

Delete line

height: 100%;

from

table.test td.cell a { ... }

and add

vertical-align: middle;

to

table.test td { ... }
+1
source

Try the following css to center and vertically align the text:

  table.test td { 
  text-align:center;
  vertical-align:middle
  }
0
source

:

.cell {
    line-height: 4em;
}


.cell {
    line-height: 4em;
    text-align: center;
}

http://jsfiddle.net/HA6Wq/1/

0

, jquery, ,

, :

<html>
<head>
//Really important, put this if you want the jquery to work
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style>

table.test td
{border:1px solid black;
width: 200px;
height: 40px;}

.cell 
{background-color: #FFF5EE; 
cursor:pointer;}

.hover
{background-color: #D2691E;}


</style>
<script>
    $(document).ready(function() {
            //Replace your link and redirect when you click on the cell
        $(".cell").click(function() { window.location = 'http:\www.google.lt'});
            //Since you can't put a hover class on a td, you have to do it in jquery
        $(".cell").hover(function() { $(this).addClass("hover");}, function() {$(this).removeClass("hover");});

    });
</script>


</head>
<body>

<table class="test">
<tr>
<td class="cell">Google</td>
<td>Line1</td>
</tr>
<tr>
<td class="cell">Google</td>
<td>Line1<br>Line2<br>Line3</td>
</tr>
</table>

</table>
</body>

td

, :)

: http://jsfiddle.net/d9CGX/

:

: http://jsfiddle.net/d9CGX/2/ ,

0

, javascript onclick:

.tdmenu 
{
    vertical-align : middle;
    padding-left : 10px;
    padding-right : 10px;
}
.tdmenu:hover
{
    background-color : rgb(220,220,220); /*set color to whatever you like*/
    cursor : pointer;
}

HTML

<table cellpadding="2" cellspacing="0" style="height : 40px; background-color : rgb(255,255,255);">
<tr style="height : 100%;">
    <td class="tdmenu" onclick="document.location='Default.aspx';">Home</td>
    <td class="tdmenu" onclick="document.location='Projects.aspx';">Projects</td>
</tr>
</table>

, .

0

More articles:


All Articles