Small CSS prob...

TechnoScream · 7 Nov 2006 at 09:57

All I want to do is make the text on this css button vertically aligned. I cant seem to make it work. it seems that as standard the text is positioned towards the top of the button?

code included below, thanks in advance!

Code:

<html>
<head>

<style type="text/css">
<!--

.button a{
font-size: 1em;
border: solid;
border-color: #aaaaaa;
border-width: 1px;
width: 150px;
color:#FF6600;
text-align: center;
font-family:verdana, arial;
background-color: #C8F526;
display: block;
text-decoration: none;
height: 25px;
font-weight: bold;

  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

-->
</style>
</head>
<body>

<div class="button"><a href="http://www.google.co.uk">Home</a></div>


</body>

</html>

Frost · 7 Nov 2006 at 10:06

I think its because you have specified a height for the link, you could take off the height and add in:

padding: 3px 0;

that is more or less the same height and also means the buttons will scale to fit the link if someone has larger text size in their browser.

TechnoScream · 7 Nov 2006 at 10:20

Frost said:
I think its because you have specified a height for the link, you could take off the height and add in:
padding: 3px 0;

Thank you very much Frost, thats great!

Small CSS prob...

TechnoScream

TechnoScream

Frost

Frost

TechnoScream

TechnoScream