Как выровнять пагинацию по центру без известной ширины?

Question

[Алексей]

Здравствуйте, есть такой код:

<div class="pages">
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </div>

вот для него scss:

div.pages {
    clear: both;
    text-align: center;
    ul {
      text-align: center;
      li {
        float: left;
      }
    }
  }

Как мне его выровнять по центру внутри блока pages (блок pages % ширины) и не известно сколько страниц будет в пагинации

Answer 1

[Сергей Протько]

display: inline-block и центрируем все через text-align.
codepen.io/anon/pen/QwGWye

Есть так же вариации с margin: auto для ul а так же с flexbox но это уже от задачи зависит.

Answer 2

[Сергей Карвасарный]

я обычно делаю через и все центрируется при любой длине блока

<div class="paginator">
            <p>
              <a class="prev not-active"></a>
              <a class="active">1</a>
              <a href="#">2</a>
              <a href="#">3</a>
              <a href="#">4</a>
              <a href="#">5</a>
              <a href="#">6</a>
              <a href="#" class="next"></a><!--чтобы убрать активность добавить класс not-active и убрать href=""-->
            </p>
          </div>

.paginator {
text-align: center;
}

Comments

[Сергей Карвасарный]

на комент не обращай внимание для прогера)

[Сергей Протько]

Сергей Карвасарный: фу, а как же семантика?

[Сергей Карвасарный]

Сергей Протько: а что есть какой-то закон который запрещает делать так? я не вижу здесь ничего такого, и тегов поменьше. да и думаю если ты в своем коде float:left заменишь на какой нибудь Display: , то и с Ul все будет нормально.

Answer 3

[Александр Цымбал]

у li убрать float и добавить display: inline-block - они выровняются по центру в блоке ul (кстати, к ul добавить display: block;)

Answer 4

[Rad1calDreamer]

position absolute
left 50%
transform translateX(-50%)

Comments

[Rad1calDreamer]

Aingis: в данном случае пагинатор не может переносится, на счет рендеринга шрифтов - хз, все зависит от шрифта, но для пагинатора (цифр) можно подобрать системный шрифт. Ну и абсолютное позиционирование не удобно? я даже не знаю, что и сказать. Чем оно не удобно например?

Answer 5

[Володимир Годяк]

ul{display:block; text-align:center;} ul > li {display:inline; float:none;}