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

问题

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:

and verbally:

One letter in a circle which is centered in both directions
Letter in circle will be dynamic so CSS setting shouldn't be for some specific letters only (will be the first letter of the comment author's name)
diameter of the circle may be changed in the future (40px for the time being)
letter must not overflow out of the circle
letter must be as large as possible
I don't have any font-family restriction. If answer requires monospace family, it's OK.

the code in jsfiddle link is given below. Can you please help me if this is achievable?

HTML

Ş

CSS3

html5doctor.com CSS resetting CODE here

.step {
  background: #cccccc;
  border-radius: 2.5em; /* 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;
  font-size:1em;}

.letter{font-size:5em;background:orange;position:relative;top:.1em;}

回答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.

来源：https://stackoverflow.com/questions/24529114/centering-a-capital-letter-with-max-possible-dimensions-in-a-circle

标签

html

css

css3

typography