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.
You can't have a <div> inside an <a>, it's invalid HTML. Use a <span> set to display: block; instead.
Update:
As of HTML5, you can now have a div inside an anchor (or any block level element.)
For this to be legal though, you must use the HTML5 doctype:
<!DOCTYPE html>