Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    39
    Thanks
    18
    Thanked 0 Times in 0 Posts

    centering a link in a cell

    hi everybody,

    i'm putting a link inside a cell, and trying to make the entire cell clickable.. but when i do this can't make it vertically centered.. any help?


    Code:
    <table width="300" height="300" border="2" cellspacing="1" cellpadding="1">
      <tr>
        <td align="center"><a href="#">ali</a></td>
        <td align="center">veli</td>
      </tr>
      <tr>
        <td width="150" height="150" align="center"><a style="display:block;width:100%;height:100%;" href="#">kofte</a></td>
        <td align="center">pilav</td>
      </tr>
    </table>

  • #2
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 1 Time in 1 Post
    First, to center that link for kofte, you use line-height:150px;. Second, to make the entire cell clickable, I took the style out of your link tags and created a div element inside of them, so that anything within the div (the entire cell) is the link. Here is the code:


    Code:
    <table width="300" height="300" border="2" cellspacing="1" cellpadding="1">
      <tr>
        <td align="center"><a href="#">ali</a></td>
        <td align="center">veli</td>
      </tr>
      <tr>
        <td width="150" height="150" align="center"><a href="href="#"><div 
    
    style="display:block;width:100%;height:100%;vertical-align:center;line-height:150px;">kofte</div></a></td>
        <td align="center">pilav</td>
      </tr>
    </table>

    If you have any problems with the other cells losing their centering, it may be because you are using align="center". You may want to switch them to "style="width:150px;height:150px;text-align:center;line-height:150px;" at some point.

  • Users who have thanked tomtrain for this post:

    ali haydar (02-13-2012)

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    39
    Thanks
    18
    Thanked 0 Times in 0 Posts
    thank you very much, that works..



    is there any other solution to this other than line-height solution.. because it doesn't work with opera mini..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •