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

这是我的小提琴，这是代码

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

}

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

我想把“A”圈起来。但是border-radius:50%并不是一个完美的圆。我该怎么把文字（只是“A”）放在中间呢？

最佳答案

这对你有用。
我已经将display: inline-block;margin-right: 5px;float: left;添加到您的.optionalphabetnumber中，因为.optionalphabetnumber是一个<span>并且它的默认显示属性是inline。因此，它不会与其他组件正确对齐，我们也无法正确设置它的样式。因此，通过应用display: inline-block;我们将覆盖它的默认属性。

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

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

关于html - 如何使用CSS制作圆圈并将文字放在中间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46648355/