大写字母居中，最大可能的尺寸 [英] Centering a capital letter with max. possible dimensions in a circle

问题描述

我要求纯CSS具有以下要求.我针对 http://jsfiddle.net/5rH5R/

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:

和口头上:

• 在两个方向上居中的圆圈中的一个字母
• 圆圈中的字母将是动态的，因此CSS设置不应仅用于某些特定的字母(将是评论作者姓名的首字母)
• 圆的直径将来可能会更改(暂时为40px)
• 字母绝对不能溢出圈子
• 字母必须尽可能大
• 我没有任何font-family限制.如果答案需要monospace家庭，就可以.

• 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.

jsfiddle链接中的代码如下.如果可以实现，请您能帮帮我吗?

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

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

推荐答案

我稍微改变了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％，即使宽度和高度相同，即使将来尺寸发生变化，它也会始终创建一个圆.

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.

您可以稍微按一下.letter的font-size来使字母变大.

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

这篇关于大写字母居中，最大可能的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！