CSS不会在父div中居中列表[重复]

Question

这似乎是一个相当简单的问题，网站上肯定有足够多的人询问类似的问题，但在阅读了十几个并尝试了很多事情之后，我仍然卡住了。为什么？

我试图在我的 Django 网站上简单地将导航列表居中以进行分页。这是我的标记：

  {% if concerts.has_other_pages %}
  <div class="center">
    <ul class="paginator">
      {% if concerts.has_previous %}
        <li><a href="?page={{ concerts.previous_page_number }}">&laquo;</a></li>
      {% else %}
        <li class="disabled"><span>&laquo;</span></li>
      {% endif %}
      {% for i in concerts.paginator.page_range %}
        {% if concerts.number == i %}
        <li class="active"><span>{{ i }}</span></li>
        {% else %}
          <li><a href="?page={{ i }}">{{ i }}</a></li>
        {% endif %}
      {% endfor %}
      {% if concerts.has_next %}
        <li><a href="?page={{ concerts.next_page_number }}">&raquo;</a></li>
      {% else %}
        <li class="disabled"><span>&raquo;</span></li>
      {% endif %}
    </ul>
  </div>
  {% endif %}

这是我的 CSS：

.center{
  text-align: center;
}

.center .paginator{
  width: 100%;
  margin: 1em 0;
  padding: 0;
  list-style-type: none;
}

.paginator li{
  display: inline-block;
  float: left;
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 1.3em;
  text-align: center;
}

.paginator li a{
  padding: 8px 16px;
  border-radius: 5px;
}

.paginator li.active{
  background-color: #444;
}

.paginator li a:hover{
  background-color: #111;
  border-radius: 5px;
  transition: background-color .5s;
}

所有这些样式都适用，只是无论我做什么，按钮都只是紧贴屏幕左侧而不居中。有任何想法吗？我花了很多时间来解决这个非常简单的问题。

Answer 1

您不能同时显示float 和inline-block：

.paginator li{
  display: inline-block;
  /* float: left; /* This forces you to put it to left align */
  padding: 8px 16px;
  border-radius: 5px;
  font-size: 1.3em;
  text-align: center;
}

删除上述规则，它应该可以正常工作。