How to vertically align inline elements

Question

I have this anchor tag that has text between to be vertically align text. I'm using this css attribute vertical-align: middle. Nothing happens tho.

Solution 1

You can make it inline-block and give it a line-height:

a {
    line-height: 50px;
    display: inline-block;
}

JSFiddle with working example: http://jsfiddle.net/KgqJS/

Solution 2

vertical-align only works on elements with display: table-cell, and that property value isn't supported in < IE8.

Known text

If you know the text to be centred, it is rather easy. You have two options.

<style type="text/css">
    #container {
        padding: 10px 0;
    }
</style>
<div id="container">
    Example of some lovely<br />
    multiline text.
</div>

You can use CSS's padding to add padding top and bottom, to make the text appear in the middle. This is useful for multiline text.

<style type="text/css">
    #container {
        height: 100px;
        line-height: 100px;
    }
</style>
<div id="container">
    Example
</div>

You can exploit the line-height property to make the text vertically centred. This only works with one line of text. You can guess what happens if there is more than 1.

Dynamic multiline text

Here is where things start to get somewhat tricky, and may have you crying for tables.

<style type="text/css">
    #container {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div id="container">
    <?php echo $content; ?>
</div>

Workaround for < IE8.

Source.

Solution 3

<div><p>test test test test<p></div>

div{
    border:1px solid red;
    width:400px;
    height:400px;
    position:relative;
}


p{
    height:30px;
    position:absolute;
    top:50%;
    margin-top:-15px; /* negative half of height*/
}

Check working example at http://jsfiddle.net/Z2ssq/1/

Comments

[dave]

Padding is the only thing that seems to work, but padding adds to hieght of box, which I don't want.

[user3167101]

Try the last example, and its workaround if you need to support < IE8.

[dave]

So w/o tables, then padding is the only way to go?

[user3167101]

@dave You don't actually use the table element, you just use CSS to make its display work like a table. The workaround for < IE8 doesn't use any table related CSS, but it adds a few extra wrapper elements, and so it is kind of ugly.

[Bazzz]

Huh? The OP is not specifically about IE8 at all and neither is my answer. Moreover, at 18 March 2011 jsFiddle did actually support IE8 so the answer was perfectly relevant at that time. Why did you add this comment?

[Shannon Hochkins]

Coming back to this now, I have no idea! haha (late night code nights destroy brain cells)

[zanderwar]

Instead of margin-top:-15px; /* negative half of height*/ you should use the more accurate approach transform: translateY(-50%)