Ich benötige folgende Anforderungen mit reinem CSS. Was ich erfolglos für mein Ziel versucht habehttp://jsfiddle.net/5rH5R/

Was ich versuche mit einem generischen Image zu erreichen:

und mündlich:

Ein Buchstabe in einem Kreis, der in beide Richtungen zentriert istDer Buchstabe im Kreis ist dynamisch, daher sollte die CSS-Einstellung nicht nur für bestimmte Buchstaben gelten (dies ist der erste Buchstabe des Kommentarnamens des Autors).Durchmesser des Kreises kann in Zukunft geändert werden (vorerst 40px)Der Brief darf nicht aus dem Kreis herauslaufenDer Buchstabe muss so groß wie möglich seinIch habe keinefont-family Beschränkung. Wenn die Antwort es erfordertmonospace Familie, es ist in Ordnung.

Der Code in jsfiddle Link ist unten angegeben. Können Sie mir bitte helfen, wenn dies erreichbar ist?

HTML

<p><span class="step"><span class="letter">Ş</span></span></p>

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;}