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

Question

这是我的 fiddle Fiddle这是代码

.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”)置于中心？

Answer 1

这对你有用。

我已经添加了 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>