CSS Text centered inside a DIV

Question

I am trying to achieve something and can't manage to do so.

I have a div with fixed HEIGHT & WIDTH. I want the text to be centered vertically.

up till now I managed to do so:

<div>
   <a>this is a long text</a>
</div>

and it will look like this

-------------
This is a long
    text
-------------

which is great

But if the line won't wrap it will look like this

------------
This is short

-------------

.the-div
{
height:29px;
line-height:14px !important;
}

.the-a
{
font-size:12px;
}

I need this to be valigned as well!

I tried using line-height and to play with is with JS to understand if its wrapping or not and then changing the line-height accordingly

Thanks for the help

Answer 1

try this example

http://jsfiddle.net/fcalderan/3HBC4/1/

Answer 2

To be vertical aligned as well, you'll need to use some display as table hacks. This will allow you to use vertical-align:middle; , achieving the look I believe you desire.

Example

Answer 3

.the-a
{
font-size:12px;
vertical-align: middle;
}

Answer 4

if you make the line-height same as the height of div, it will automatically vertical centered

the-div
{
height:29px;
line-height:29px !important;
}

Answer 5

div a{
margin-top:auto;
margin-bottom:auto;
}