I have an <a>
tag containing a background image and text. The problem is that the text sticks to the top of the image.
<a class="BigBlueButton" href="/where-is-my-order.aspx">
Where Is My Order?
</a>
And my CSS is as follows:
.BigBlueButton
{
width: 233px;
vertical-align: middle;
text-align: center;
height: 122px;
background: url(../img/GreenBotton.png) no-repeat;
background-repeat: no-repeat;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 1%;
display: inline-block;
color: White;
font-size: large;
font-weight: bold;
text-decoration: none;
vertical-align: middle;
}
I have used line-height, but for tags with little bit larger texts the whole text does not display.
What is it with given the CSS and HTML content:
And what I get with line-height:
BigBlueButton
but the CSS you posted is forBiGreenButton
line-height
doesn't meet your requirements?