0

I'm trying to vertically align an inline element in a div tag. Here is my HTML:

<div class="foo">
    <div id="bar">
        <a href="#">Link 1</a>
    </div>
</div>

And here's my CSS:

.foo{
    width:200px;
    height:60px;
    background-color:red;
}

.foo #bar{
    text-align:center;
    vertical-align:middle;
}

How do I vertically align this anchor tag? Have I set the HTML/CSS up the right way to effectively do this? What are the best practices for vertically aligning inline and block elements?

Thanks

symlink
  • 11,984
  • 7
  • 29
  • 50

1 Answers1

1

.Purest way with css is to use the display attribute like so:

.foo { display: table; } 
#bar {
    display: table-cell;
    vertical-align: middle;
}

This is assuming your #bar has a height of some description set, its contents should align themselves vertically..

danielsan
  • 426
  • 1
  • 4
  • 7
  • The above should work. It is worth noting that "vertical-align" actually aligns elements inline relative to each other. For example, if you have an image in a line of text setting "vertical-align: middle;" will align the text to the middle of the image. It is not used for block level centering. You can read more here: http://phrogz.net/css/vertical-align/index.html – Darren Dec 11 '12 at 01:27