CODEWITHSUNDEEP
htmlcsshtml-table
Mike
Mike

Reputation: 71

Can't vertically align a link in a table cell

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).

Upvotes: 7

Views: 5702

Answers (7)

stealth
stealth

Reputation: 359

I was involved with a similar situation and it took many hours to figure out. This method will allow you to vertically align and center. Replace your 

<a href="http://www.linkhere.com"></a>

code with this.

<div style="display:table;width:100%;height:100%;">
    <a href="http://www.linkhere.com" style="display:table-row;">
        <div style="display:table-cell;vertical-align:middle;align-text:center;">
            Link contents go here
        </div>
    </a>
</div>

Put the contents of the link inside the div table-cell of course. This will stretch the link also to the edges of the container your using for this code. Hope that helps.

Upvotes: 0

Ian
Ian

Reputation: 158

just if it helps I did this and switched the link to a 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;
}

And my 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>

Seems to play nice.

Upvotes: 0

ojinmor
ojinmor

Reputation: 133

Remove the line 

height: 100%;

from

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

and add

vertical-align: middle;

to

table.test td { ... }

Upvotes: 2

david
david

Reputation: 4278

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

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

Upvotes: 0

GregM
GregM

Reputation: 2654

Ok i made a lot of modification and included jquery but i think it's what you want

So here we go :

<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>

And I've put the min-height as a height in the td style

I know it's a lot of change but it's working :)

And here is the fiddle : http://jsfiddle.net/d9CGX/

EDIT :

I've updated the fiddle : http://jsfiddle.net/d9CGX/2/ So you can have multiple link

Upvotes: 0

Pheonix
Pheonix

Reputation: 6052

Try This ::

.cell {
    line-height: 4em;
}

and for horizontal alignment

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

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

Upvotes: 0

Zhianc
Zhianc

Reputation: 1451

use vertical-align:

http://jsfiddle.net/pN4pQ/1/

Upvotes: 0

Related Questions