Question

I have a box of fixed width and height, I have a link in it, i want to display the link in the center of box (vertically). Please see this jsfiddle to see the problem

Demo: http://jsfiddle.net/a5hP3/

Here’s code anyway:

HTML:

<div class="box">
    <a href="#">put it down, in center of box</a>
</div>

CSS:

.box
{
   width: 200px;
   height: 300px;
   border:1px solid green;
}

.box a{
      vertical-align:middle; //doesnt work
}

Answer 1

You can set the line-height equal to the height:

.box
{
   width: 200px;
   height: 300px;
   border:1px solid green;
   line-height: 300px;
}

http://jsfiddle.net/a5hP3/3