i'm using css to put text on top of image to make button, but i can't align the text exactly in the middle vertically or horisontally
what i have:
--------
| text |
| |
|______|
what i want:
--------
| |
| text |
|______|
source:
code:
#menu {
width: 70%;
height: 25px;
border-bottom: 1px none #5b5b5b;
padding-left: 25px;
}
#menu li {
display: inline;
}
#menu a {
width: 70px;
height: 25px;
background-image:url('button1.jpg');
text-align: center;
font-family: Arial;
font-style: bold;
color: white;
display: block;
float: left;
font-size: 15px;
padding:0 2px 0 2px;
background-repeat: no-repeat;
}
#menu a:hover {
width: 70px;
height: 25px;
background-image:url('button2.jpg');
background-repeat: no-repeat;
text-align: center;
font-family: Arial;
font-style: bold;
color: white;
display: block;
float: left;
font-size: 15px;
padding:0 2px 0 2px;
}
and
code:
<div id="menu" align="center">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</div>
help?
