how can i get vertical align?

Discussion in 'HTML' started by Giorgio, Jun 18, 2005.

  1. Giorgio

    Giorgio Guest

    Hi,
    I use this code to extend <A> area to all the black cell, but i can't center
    the links vertically.
    Can you help me, please?

    Thanks

    <HTML>
    <HEAD>
    <TITLE></TITLE>

    <style type="text/css">
    <!--
    td a {
    display:block;
    width:40px;
    height: 40px;
    background-color:#000000;
    vertical-align: middle;
    color: #ffffff;
    text-align:center;
    text-decoration:none;
    font-family:verdana;
    font-weight:bold;
    }
    td a:hover {
    background: #80ff40;
    color: #000000;
    }
    -->
    </style>
    </HEAD>
    <BODY>
    <TABLE>
    <TR>
    <TD><A href="#">1</A></TD><TD><A href="#">2</A></TD><TD><A
    href="#">3</A></TD>
    </TR>
    </TABLE>
    </BODY></HTML>
    Giorgio, Jun 18, 2005
    #1
    1. Advertising

  2. Giorgio wrote:

    > Hi,
    > I use this code to extend <A> area to all the black cell, but i can't center
    > the links vertically.
    > Can you help me, please?
    >
    > Thanks
    >

    <snip code>

    the LINKS are vertically aligned within the table cells, see for
    yourself by adding a border to the links:


    td a {
    display:block;
    width:40px;
    height: 40px;
    line-height: 40px;
    background-color:#000000;
    vertical-align: middle;
    color: #ffffff;
    text-align:center;
    text-decoration:none;
    font-family:verdana;
    font-weight:bold;
    border: 1px solid red; /* add this */
    }

    now try this and see what one of your problems are...

    td a {
    display:block;
    width:40px;
    /* disable this 'height: 40px;' */
    line-height: 40px; /* add this */
    background-color:#000000;
    vertical-align: middle;
    color: #ffffff;
    text-align:center;
    text-decoration:none;
    font-family:verdana;
    font-weight:bold;
    border: 1px solid red; /* add this */
    }




    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 18, 2005
    #2
    1. Advertising

  3. Giorgio

    Giorgio Guest

    Thanks, it works.
    Why is border larger in 2 sides (up and left)?
    Giorgio, Jun 20, 2005
    #3
  4. Giorgio

    Giorgio Guest

    sorry, bottom and left
    it's weird cause if i stamp screen and zoom it, i can see that the border is
    1 pixel everywhere but if i look it without zoom it seems that is larger in
    the bottom and in the left side.
    Giorgio, Jun 20, 2005
    #4
  5. Giorgio wrote:

    > sorry, bottom and left
    > it's weird cause if i stamp screen and zoom it, i can see that the border is
    > 1 pixel everywhere but if i look it without zoom it seems that is larger in
    > the bottom and in the left side.
    >
    >


    Sounds like a video driver/monitor issue or possibly your browser's
    rendering engine...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jun 20, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,133
  2. Rabbit
    Replies:
    1
    Views:
    2,742
    Shimon Sim
    Feb 12, 2006
  3. shank

    vertical-align: bottom

    shank, Oct 2, 2003, in forum: HTML
    Replies:
    9
    Views:
    20,896
    brucie
    Oct 3, 2003
  4. Jochen Fuhrmann

    vertical-align and div

    Jochen Fuhrmann, Oct 6, 2003, in forum: HTML
    Replies:
    1
    Views:
    24,436
    Steve Pugh
    Oct 6, 2003
  5. tshad
    Replies:
    9
    Views:
    618
    edwatki
    Jul 27, 2006
Loading...

Share This Page