Just thought I’d let you all know of a quick trick to get your text to vertically align within an element without using nasty padding or margin hacks. If you know that your element is going to be a certain height, then you can use the css attribute ‘line-height’ and give it the same value as the height of the object. Please note that this will only work where there is only a single line of text.
The background colour I’m using is #EFF8F8
Here I have a pseudo-button and actually it’s just a text link within a <p>. Here’s the HTML and css:
<p class="actionbutton"><a href="/BuyingAndSelling/BuyHoliday">Buy Holiday</a></p>
p.actionbutton
{
margin:0 auto 1em auto; /*center the button on the page*/
text-align:center;
width:124px;
height:44px;
}
p.actionbutton a
{
line-height:44px; /* same height as actionbutton element */
font-size:1.2em;
display:block; /* makes the whole area clickable rather than just the text */
text-decoration:none;
color:Black;
background-image: url('smartbutton.gif');
}
/*rollover*/
p.actionbutton a:hover
{
color:DarkOrange;
background-image: url('smartbutton-down.gif');
}
Here are the source images for you to play around with
Normal button state
On mouse rollover
Comments