19

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.

dave
  • 14,991
  • 26
  • 76
  • 110
  • 2
    It's difficult to understand what you're referring to by "tag that has text between" unless you provide a small code/markup example. @alex has written this cool answer and I'm not sure if his solution even applies to the markup you have... – Már Örlygsson Mar 18 '11 at 00:02
  • +1 for friendly reminder, I got shouted at for having 60%! Friendliness is the way to go! – Mild Fuzz Mar 18 '11 at 10:38

3 Answers3

15

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/

TylerH
  • 20,799
  • 66
  • 75
  • 101
Bazzz
  • 26,427
  • 12
  • 52
  • 69
  • 2
    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? – Bazzz Mar 26 '13 at 08:03
  • 7
    Coming back to this now, I have no idea! haha (late night code nights destroy brain cells) – Shannon Hochkins Mar 27 '13 at 04:04
6

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.

Community
  • 1
  • 1
alex
  • 479,566
  • 201
  • 878
  • 984
  • Padding is the only thing that seems to work, but padding adds to hieght of box, which I don't want. – dave Mar 17 '11 at 23:41
  • Try the last example, and its workaround if you need to support < IE8. – alex Mar 17 '11 at 23:41
  • So w/o tables, then padding is the only way to go? – dave Mar 17 '11 at 23:42
  • @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. – alex Mar 17 '11 at 23:44
2
<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/

alex
  • 479,566
  • 201
  • 878
  • 984
Hussein
  • 42,480
  • 25
  • 113
  • 143
  • 1
    Instead of `margin-top:-15px; /* negative half of height*/` you should use the more accurate approach `transform: translateY(-50%)` – zanderwar Mar 31 '16 at 05:25