文本在跨度中不会焦虑地对齐

Question

text-align (center)属性对我的文本不能正常工作。我有以下代码：

 <span class="info">&nbsp;i&nbsp;<span id="uitleg_itje">Bla bla. 
 </span></span>

info类的css是：

 .info {
  font-weight: bold;
  text-align: center;
  background-color: #C73C3C;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-transform: lowercase;
  letter-spacing: 4px;
  color: #ffffff;
  cursor: pointer;
  font-size: 21px;
}

目前的结果是：

​

​

Answer 1

这可能是由于填充而不是这个和 ，你可以尝试使用填充代替。

​

.info {
  font-weight: bold;
  text-align: center;
  background-color: #C73C3C;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-transform: lowercase;
  /*letter-spacing: 4px;*/
  padding: 0 20px;
  color: #ffffff;
  cursor: pointer;
  font-size: 21px;
}

<span class="info">i</span>

​

Answer 2

你可以在span tag.Then上面设置div，你的文本会居中。

​

 .info {
  font-weight: bold;
  text-align: center;
  background-color: #C73C3C;
  -moz-border-radius: 15px;
  border-radius: 15px;
  text-transform: lowercase;
  letter-spacing: 4px;
  color: #ffffff;
  cursor: pointer;
  font-size: 21px;
}

div{
text-align:center;
}

 <div>
 <span class="info">&nbsp;i&nbsp;<span id="uitleg_itje">Bla bla. 
 </span></span>
</div>

​