Question

I am trying to center a Character inside a div both vertically and horizontally.
I had used the following piece of css to achieve so.

  margin : 0 auto; //attempt1
  text-align:center; //attempt2

Both did not work, Attempt 2 simply align the character horizontally.
But i need to align it vertically too.

My Code is here

Any clues to achieve this?

Answer 1

This is how you fix it:

First wrap the character in an element:

<div id="DivMenu">
   <div id="character">R</div>
</div>

Then set the following CSS:

#DivMenu{
   ...
   text-align:center;
}

#character{
   position:relative;
   top:50%;
   margin-top:-10px
}

Working example