SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Italy
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertical align for a href.

    hi,

    please I want to know if exists a vertical alignment for a 'a href'.
    Having a 'a href' as display:block, I have set a height to it. Now the alignment of the text is on top... I want to align the text in the middle of the block.
    How can I obtain this?

    many thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The vertical-align roperty only applies to inline elements and sets the alignment with other inline elements on a single line. It does not apply to block level elements.

    However if you have some text that isn't going to wrap you can set the line-height to the same as the height and the text will be in the middle of that block box.

    e.g.
    Code:
    a.test{
    display:block;
    height:40px;
    line-height:40px;
    }
    It won't of course align the block box with any other elements.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Code:
      <div class="outer">
          <div class="inner">
            <div class="mid">
                 <p><a href="#">and some text</a></p>
            </div>
          </div>
        </div>
    And now the CSS
    Code:
    ]
    .outer {
        position: relative;
        display: table;
        vertical-align: middle;
        height: 300px;
        width: 300px;
        margin: 25px auto 0;
        border: 1px solid black;
        }
    
    .inner {
        position: relative;
        display: table-cell;
        vertical-align: middle;
        width: 100&#37;;
        }
    
    .mid {
        border: 1px dashed silver; /*for clarity*/
        }
    
    * html .inner {
        top: 50%;
        left: 0;
        }
    
    * html .inner .mid {
        position: relative;
        top: -50%;
        }
    Basically uses display:table to get the content vertically centered, and gets it working in earlly IE due to a bug wihch works off a double relative shift (that's right Paul, I'm using your phrase ).

    If it's just a single line of text and you know the height of the anchor you can set a line-height equal to the height you set and it will center (this is only for one line)
    Off Topic:

    Code by Gary, why rewrite?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Italy
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mainly I want both a vertical align for a href, and a space where I am able to click the hypertext equal to the height I set for the block....
    I hope I have been clear...

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Either float the "href", otherwise known as an anchor, of disply block it and give it your height and width.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by franciska View Post
    mainly I want both a vertical align for a href, and a space where I am able to click the hypertext equal to the height I set for the block....
    I hope I have been clear...
    I have given you have the code in post #2 which should do what you want. As Eric said if you want them aligned horizontally then float the elements also.

    If you want something more complicated than that then Ryan has given you a method for aligning block elements vertically,

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Italy
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    see this. I have height for the anchor (so I can click also the space where there isn't any text...), but I am unable to align the text inside vertically centered.


    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
      <title></title>
      <style type="text/css">
         .link {
             display: block;
             border: 1px solid red;
             height: 98px;
         }
      </style>
      </head>
      <body>
          <table>
          <tr>
             <td>
                <a href class='link'>text..text..text..text..<br>text..text..text..text..text..text..text..text..text..</a>
             </td>
          </tr>
          </table>
      </body>
    </html>

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    My example wasn't what you needed?
    Code:
    <!doctype html>
    <html>
    <head>
    <title>thread</title>
    <style type="text/css">
    .outer {
        position: relative;
        display: table;
        vertical-align: middle;
        height: 300px;
        width: 300px;
        margin: 25px auto 0;
        border: 1px solid black;
        }
    
    .inner {
        position: relative;
        display: table-cell;
        vertical-align: middle;
        width: 100&#37;;
        }
    
    a{height:100%;display:table;width:100%;}
    a span{
        display:table-cell;
        vertical-align:middle;
    }
    * html .inner {
        top: 50%;
        left: 0;
        }
    
    * html .inner .mid {
        position: relative;
        top: -50%;
        }
    </style>
    </head>
    <body>
      <div class="outer">
          <div class="inner">
            <a href="#"><span>and some text</span></a>
          </div>
        </div></body>
    </html>
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Italy
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes it's good. but in this case you can't control the width of the inner cell also if you set width...

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I only set a width so it would stretch 100&#37; of the way, which is what I assumed you wanted. Perhaps I'm missing something?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Italy
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no. everything is perfect but the width of the single cell!


Bookmarks

Posting Permissions

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