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

Question

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

FYI your link has the class `BigBlueButton` but the CSS you posted is for `BiGreenButton` — j08691, Mar 13 '13 at 21:03
Well, could you give an example where `line-height` doesn't meet your requirements? — Linus Caldwell, Mar 13 '13 at 21:03
duplicate http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div — Daniel Moses, Mar 13 '13 at 21:05
@amir I thought so, that's why I gave a +1 to Adrift's answer. It's the only way. — Linus Caldwell, Mar 13 '13 at 21:22
@LinusCaldwell, OK lets use Line-height, I am wondering if I can wrap the text some how then? — amir moradifard, Mar 13 '13 at 21:24
@amir I gave my +1 to the `display: table-cell` solution, not to the `line-height`. — Linus Caldwell, Mar 13 '13 at 21:25
@LinusCaldwell, aha, sorry! I have 12 of these boxes in my page, using Display:Table-Cell blow everything up. There is no alternatives? — amir moradifard, Mar 13 '13 at 21:27
@amir There is an answer for every possible way. With one of those you'll have to live, sorry. — Linus Caldwell, Mar 13 '13 at 21:29
possible duplicate of [What's The Best Way of Centering a Div Vertically with CSS](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) — kapa, Mar 13 '13 at 21:34
A design comment - if you can, try and make those boxes a bit more subtle. Strong gradients like the ones you have are distracting and they make text harder to read. — sscirrus, Mar 13 '13 at 21:50
I added padding-top, That's better option for me, however its not the best!!! — amir moradifard, Mar 13 '13 at 22:02
possible duplicate of [How to align text vertically center in div with css?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — user, Mar 09 '14 at 19:27

score 2 · Answer 1 · answered Mar 13 '13 at 21:03

2

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

jsFiddle

answered Mar 13 '13 at 21:03

Adrift

58,167
12
92
90

@LinusCaldwell - there's [nearly 95% browser support](http://caniuse.com/#search=table-cell), and you can add an acceptable fallback for old IE with `padding` or `line-height` if needed. – CherryFlavourPez Mar 13 '13 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 – amir moradifard Mar 13 '13 at 21:18
2

Please be more specific. What does "blow up" mean? – Linus Caldwell Mar 13 '13 at 21:23
@LinusCaldwell please see Update3! – amir moradifard Mar 13 '13 at 21:30
Ok, and how should it look like? With the `width` set, I would say it looks like it should. – Linus Caldwell Mar 13 '13 at 21:32
@LinusCaldwell: Update4 shows how it looks like and its almost ok except the text vertical alignment! – amir moradifard Mar 13 '13 at 21:38
Well, in that case I'm afraid you'll have to use a wrapper. – Linus Caldwell Mar 13 '13 at 21:42

score 1 · Answer 2 · edited Jun 05 '21 at 19:31

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;
}

edited Jun 05 '21 at 19:31

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 21:00

Linus Caldwell

10,908
12
46
58

score 1 · Answer 3 · edited Jun 05 '21 at 19:32

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>

edited Jun 05 '21 at 19:32

Peter Mortensen

30,738
21
105
131

answered Mar 13 '13 at 21:03

Jack M.

1,195
13
30

score 0 · Accepted Answer · edited Jun 05 '21 at 19:35

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

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

4 Answers4