Search code examples
cssvertical-alignment

How can I set the inside text of an <a> element vertically in the middle?

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:

Normal one

And what I get with line-height:

With line-height

Solution

  • To solve this, finally I found the following workaround:

    <a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
      <span class="div_txt">Contentdas asd ad adasd asd asdad </span>
    </span>
</a>
<a href="www.mydoamin.com" class="div_a">
    <span class="wrapper">
        <span class="div_txt">Content</span>
    </span>
</a>

    And the following CSS

    a.div_a {
    display: inline-table;
    width: 200px;
    height: 100px;
    background-color: #CCC;
    background-image: url(http://jsfiddle.net/img/logo.png);
    text-align: center;
}

.wrapper {
    display: table-cell;
    vertical-align: middle;
}

    DEMO