Centering a capital letter with max. possible dimensions in a circle

Question

I require below requirements with pure CSS. What I tried unsuccessfully for my aim at http://jsfiddle.net/5rH5R/

what I try to achieve with a generic image:

Answer 1

I changed your CSS a little:

.step {
      background: #cccccc;
      border-radius: 50%; /* 40px */
      -moz-border-radius: 2.5em; /* 40px */
      -webkit-border-radius: 2.5em; /* 40px */
      color: #ffffff;
      display: inline-block;
      font-weight: bold;
      line-height: 5em;  
      text-align: center;
      width: 5em;
      height: 5em;
      font-size:1em;
}
.letter{
      font-size:4em;
}

Basically I set width and height of step to be the same. I set border-radius to 50%, which will always create a circle if the width and height are the same, even if the dimensions change in the future.

You can play with the font-size of the .letter a bit to make the letter as big as possible.