Question

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

Answer 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..