如何使用CSS制作圆圈并将文本放在中间

Question

这是我的小提琴Fiddle这里是代码

＆＃13;

＆＃13;

.optionalphabetnumber {
	background-color:#ff3333;
	color:white;
	width:20px;
	height: 20px; 
	text-align:center; 
  border-radius:50%;
}
button {
    background-color: #ffffff;
    color: #777;
    font-size: 18px;
    height: 66px;
    min-width: 320px;
    width: 50%;
    cursor: pointer;
    text-align: left;

}

＆＃13;

<button><span class="optionalphabetnumber">A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Superman</button>

＆＃13;

＆＃13;

＆＃13;

我想把＆＃34; A＆＃34;在一个圆圈。但是border-radius:50%并没有形成一个完美的圆圈。我如何将文本（只是＆＃34; A＆＃34;）放在中心？

Answer 1

将显示设置为inline-block，并可选择为圈子添加一些填充...

＆＃13;

＆＃13;

.optionalphabetnumber {
  background-color: #ff3333;
  color: white;
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  padding: 1em;
  margin-right: 1em;
}

button {
  background-color: #ffffff;
  color: #777;
  font-size: 18px;
  height: 66px;
  min-width: 320px;
  width: 50%;
  cursor: pointer;
  text-align: left;
}

＆＃13;

<button>
<span class="optionalphabetnumber">A</span>Superman</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这对你有用。

我已将display: inline-block;margin-right: 5px;float: left;添加到您的.optionalphabetnumber，因为.optionalphabetnumber是<span>，其默认显示属性为inline。所以它不会与其他组件正确对齐，我们也不能正确设置它。因此，通过应用display: inline-block;，我们将覆盖其默认属性。

＆＃13;

＆＃13;

.optionalphabetnumber {
  background-color: #ff3333;
  color: white;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  float: left;
}

button {
  background-color: #ffffff;
  color: #777;
  font-size: 18px;
  height: 66px;
  min-width: 320px;
  width: 50%;
  cursor: pointer;
  text-align: left;
}

＆＃13;

<button><span class="optionalphabetnumber">A</span>Superman</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将display:inline-block;添加到.optionalphabetnumber <span>是inline元素，应用于内联的高度与block或inline-block上的高度不同。

＆＃13;

＆＃13;

.optionalphabetnumber {
	background-color:#ff3333;
	color:white;
	width:20px;
	height: 20px; 
	text-align:center; 
  border-radius:50%;
  display:inline-block;
}
button {
    background-color: #ffffff;
    color: #777;
    font-size: 18px;
    height: 66px;
    min-width: 320px;
    width: 50%;
    cursor: pointer;
    text-align: left;

}

＆＃13;

<button><span class="optionalphabetnumber">A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Superman</button>

＆＃13;

＆＃13;

＆＃13;