Vertically aligned anchor text?

Question

you probably see this question a lot. However, I've been through threads and I can't seem to find a solution to my situation. It's probably something very minute that I'm missing, or perhaps I'm just barking up the wrong tree all together.

Basically what I'm trying to do is take an anchor with a {display:block;} with a set height and width and have its text be vertically and horizontally centered.

Right now this is my css

.logo
{
    width:140px;
    height:75px;
    border-right:1px dotted black;
    border-bottom:1px dotted black;
    float:left;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}

.logo a
{
    display:block;
    width:140px;
    height:75px;
    background-color:#fff;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}
/*the reason for the double declaration of text information is because
  some of the logo divs do not have anchors in them, and it's for uniformity
  purposes.
*/

.logo a div
{
    margin-top:10px;
}

and then the html would be

<div class="logo"><a href="#"><div>my link</div></a></div>

Now the reason i stuck a div inside of the anchor is because I thought it would be a good way to separate the text from the actual block, but with that margin setting it moves the anchor down instead of just the text. The vertical-align attribute does basically nothing, and I'm at a loss in terms of what to do. Any suggestions or restructuring ideas would be great. Thank you.

a sample can be found at http://www.dsi-usa.com/test/clientele.php feel free to browse the site it's still a work in progress a lot has to be organized and re-coded. Anyhow, that sample is exactly what I want, just need the text to be vertically aligned as well.

Answer 1

If you set your line-height of the containing box (your anchor -- just ditch the inner div, you don't need it) equal to its height, then a single line of text will be vertically centered. If you require line-wrapping, it gets more complicated.

Here's a fiddle with just one anchor element to demonstrate the simpler scenario: http://jsfiddle.net/vdkAb/1/

UPDATE
...and if you don't need to worry about IE6/7 support (lucky you!), then you can use display:table-cell, and it works effortlessly -- without specifying line-height -- even with multiple lines, like this: http://jsfiddle.net/PH5Yw/