Is there anyway to align text in center from all positions instead of default top-down using CSS?

Question

have a look at my code.

http://jsfiddle.net/Q8V4H/6/

The text within p element Telephone Dialer is being aligned using top-down approach whereas i want to align it in the center from all positions i,e top right bottom and left. here is the example output my code is producing.

I don't want any space there instead the text Download PC Dialer should be aligned in center of the div i.e from left,right,top,bottom and not just left and right.

here is the example image of what i want to achieve.

if i use text-align:center it will only align the text in center from left and right, not from top and bottom, and in this case i want to align it from top and bottom too. how do i do it?

thank you

Answer 1

<div style="display:table">
  <div style="display:table-row">
    <div style="display:table-cell;text-align:center;vertical-align:middle;padding:8px">
      Download PC Dialer
    </div>
  </div>
  <div style="display:table-row">
    <div style="display:table-cell;text-align:center">
      <a href="/download"><img src="download.png"></a>
    </div>
  </div>
</div>

This will give you the same behaviour as if you had used a table without the semantic issues of actually using a table. Works in all browsers except IE7 and below.

Answer 2

Put it in a <div> and then put that in another <div>. The child div should have vertical-align: middle and line-height: Xpx where X is the height of the inner div.

Look here: http://phrogz.net/css/vertical-align/index.html

Answer 3

For horziontal alignment, you can use margin: 0 auto; on a fixed div element. For vertical alignment, you can set the line-height to be same as font-size.