Центрирование заглавной буквы с макс. возможные размеры в круге

Я требую ниже требований с чистым CSS. Что я безуспешно пробовал для своей цели на http://jsfiddle.net/5rH5R/

чего я пытаюсь достичь с помощью общего изображения:

введите здесь описание изображения

и устно:

  • Одна буква в круге с центром в обоих направлениях
  • Буква в круге будет динамической, поэтому настройка CSS не должна быть только для некоторых конкретных букв (будет первой буквой имени автора комментария).
  • диаметр круга может быть изменен в будущем (на данный момент 40px)
  • буква не должна выходить за пределы круга
  • буква должна быть как можно больше
  • У меня нет font-family ограничений. Если для ответа требуется monospace семья, все в порядке.

код в ссылке jsfiddle приведен ниже. Не могли бы вы помочь мне, если это достижимо?

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

html css typography
person Andre Chenier    schedule 02.07.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я немного изменил ваш CSS:

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

В основном я устанавливаю ширину и высоту step одинаковыми. Я установил border-radius на 50%, что всегда будет создавать круг, если ширина и высота одинаковы, даже если размеры изменятся в будущем.

Вы можете немного поиграть с font-size из .letter, чтобы сделать букву как можно больше.

person constantine    schedule 02.07.2014
comment
+1 за дополнительные объяснения+скорость, спасибо. я помещаю рабочий код здесь: jsfiddle.net/K6wnK - person Andre Chenier; 02.07.2014