Ilja Ilja - 5 months ago 8
HTML Question

Vertically center <a> tag?

I'm struggling to vertically centre tag in of of the elements.

What I've got is something like:

http://jsbin.com/arudif/2/edit

<style>
header {padding: 20px 0 20px 0; clear: both;}
header a {
float: right;
vertical-align: middle;
margin: auto 0 auto 0;
}
//This is what I tried, doesnt work
</style>

<header>
<a href="#">Center Me Please!</a>
<p> Stack Overflow </p>
</header>


I just can't figure auto ho to fix that tag in the header

Answer

To Center a without taking in consideration the other contents of the container, use absolute positioning.

header
{
    position:relative;
}
a
{
    position:absolute;
    top: 50%; // nearly 50%, but not exactly 50%
    left: 50%;
}