0

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

14

4 Answers 4

2

Just change display: inline-block; to display: table-cell;

jsFiddle

7
  • @LinusCaldwell - there's nearly 95% browser support, and you can add an acceptable fallback for old IE with padding or line-height if needed. Mar 13, 2013 at 21:12
  • Dispay:Table-cell blow up all my page, I have 12 of these images in my page and they should be in line Mar 13, 2013 at 21:18
  • 2
    Please be more specific. What does "blow up" mean? Mar 13, 2013 at 21:23
  • @LinusCaldwell please see Update3! Mar 13, 2013 at 21:30
  • Ok, and how should it look like? With the width set, I would say it looks like it should. Mar 13, 2013 at 21:32
1

In your situation you'll have to use a wrapper like a <span/>. See this Fiddle:

<a href="#"><span>Text</span></a>

With this CSS content:

a
{
    display: inline-block;
    float: left;
}

span
{
    width: 233px;
    height: 122px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
1

I would use a div with padding. I don’t know if it's best practice though. Obviously, put the background in the div of the right size and use correct padding.

<a href="test.php">
    <div style="padding:10px;width:150px;border:1px #000 solid;text-align:center;">
        Hello!
    </div>
</a>
0

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

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.