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

Здравствуйте, есть такой код:
<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 % ширины) и не известно сколько страниц будет в пагинации
  • Вопрос задан
  • 3786 просмотров
Пригласить эксперта
Ответы на вопрос 5
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
display: inline-block и центрируем все через text-align.
codepen.io/anon/pen/QwGWye

Есть так же вариации с margin: auto для ul а так же с flexbox но это уже от задачи зависит.
Ответ написан
я обычно делаю через и все центрируется при любой длине блока
<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;
}
Ответ написан
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
у li убрать float и добавить display: inline-block - они выровняются по центру в блоке ul (кстати, к ul добавить display: block;)
Ответ написан
Rad1calDreamer
@Rad1calDreamer
position absolute
left 50%
transform translateX(-50%)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы