Vertical align for a href

HTML & CSS
1

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

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.


a.test{
display:block;
height:40px;
line-height:40px;
}

It won’t of course align the block box with any other elements.

3 
  <div class="outer">
      <div class="inner">
        <div class="mid">
             <p><a href="#">and some text</a></p>
        </div>
      </div>
    </div>

And now the 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;;
    }

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

4

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

Either float the “href”, otherwise known as an anchor, of disply block it and give it your height and width.

6

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

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.

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

My example wasn’t what you needed?

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

yes it’s good. but in this case you can’t control the width of the inner cell also if you set width…

10

I only set a width so it would stretch 100% of the way, which is what I assumed you wanted. Perhaps I’m missing something?

11

no. everything is perfect but the width of the single cell!