文本在跨度中不急于对齐

Question

text-align（居中）属性不适用于我的文本。 我有以下代码：

 <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

这可能是由于letter-spacing: 4px; 除了这个和 ，您可以尝试使用padding。

.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标签上方设置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>