text-align：center的问题

Question

这是我的CSS。

<style type="text/css"> .chart-legend {
  text-align: center;
}
.chart-legend li {
  list-style-type: none;
  padding-top: 15px;
}
.chart-legend li span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}
</style>

HTML

<div class="col-xs-7 col-md-6" class="thumbnail">
  <div class="thumbnail" style="width:100%">
    <h4>  <span class="label label-primary">{{ a.title }}</span></h4>
    <div>
      <canvas id="canvas{{loopIndex}}" height="450" width="600"></canvas>
    </div>
    <div id="js-legend" class="chart-legend">
    </div>
  </div>
</div>

此处，第一个图例条目与中心对齐，而第二个条目不会在对齐的第一个条目下方，但在右侧留下一些空格。下面是图像。任何帮助将非常感激。在此先感谢：）

Answer 1

他们都看着我的中心。它们是单独居中的，因为它们的长度不同，所以它们的左边缘不会相互对齐。

我怀疑你想让它们在div中对齐，然后将div居中。

此外，除非我遗漏了某些内容，否则您未包含生成附加图片所需的所有HTML。

Answer 2

它们居中，由于长度不同，它看起来像这样......
如果你想要这样的东西。你应该根据你的需要设置一个padding:somthing，如果它和html元素你也可以设置left属性。 希望这会对你有帮助..

Answer 3

全部谢谢:)但这对我来说效果很好！ ：）

.chart-legend {
    width: 50%;
    margin: 0 auto;
}