CSS won't center list within parent div

Question

This seems like a fairly straightforward issue, and there's certainly enough people asking about similar questions on the site, but after reading through like a dozen and trying a number of things, I'm still stuck. Why?

I'm trying to simply center a nav list for pagination on my Django site. Here's my markup:

  {% 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 %}

And here's my 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;
}

All these styles are applying except that no matter what I do, the buttons just hug the left side of the screen and won't center. Any ideas? I've spent an embarrassing amount of time trying to troubleshoot this very simple issue.

.paginator{ width: 50%; margin: 1em auto; }. text-align is useless to align div's — Sibiraj, May 18 '18 at 14:17

score 1 · Accepted Answer · answered May 18 '18 at 14:16

1

You cannot have both float and inline-block display:

.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;
}

Remove the above said rule and it should be working fine.

answered May 18 '18 at 14:16

Praveen Kumar Purushothaman

164,888
24
203
252

1

I wouldn't say *you cannot* but it's more about float will make this useless or override it ... As inline-block can be there with float and we may for example later remove float using media query. – Temani Afif May 18 '18 at 14:24
1

@TemaniAfif Sure, will be better in words next time. Thanks. – Praveen Kumar Purushothaman May 18 '18 at 14:25
Thank you both. I had a feeling it would be something simple. – Danny May 18 '18 at 14:27
@Danny You are welcome. Have a nice day. – Praveen Kumar Purushothaman May 18 '18 at 14:29

CSS won't center list within parent div

1 Answers1