对齐文本中心不按预期工作

Question

我正在使用Bootstrap框架，我创建了一个列，其中我在两个元素上使用了text-align:center; css属性，并且没有对齐相同的内容，我不明白为什么。 这是标记：

 <div class="row text-center">
    <div class="col-lg-4">
      <div class="thumbnail-header">
        <h1>Brand</h1>
      </div>
      <div class="thumbnail-content">
        <ul>
          <li>Identity</li>
          <li>Strategy Brand</li>
          <li>Identity Manual</li>
          <li>Guide Brand</li> 
        </ul>
      </div>

    </div>

'text-center'类有text-align:center; css属性。

这是一个工作小提琴：fiddle

有人可以解释为什么这些元素没有正确对齐吗？

Answer 1

它是<ul>

上的默认左边距

ul {
    padding-left: 0;
}

Updated fiddle

Answer 2

我建议使用.text-center Helper类而不是使用.center-block Helper类来使引导程序中的元素居中，因为此帮助程序类使用margin和display css属性来删除元素

Answer 3

使用

*{ margin: 0; padding: 0; resize: none; }

如果需要，您可以轻松避免转储默认css设置。