Как мне центрировать поплавковые элементы?

Question

Я использую нумерацию страниц, и она должна быть центрирована.Проблема в том, что ссылки должны отображаться в виде блоков, поэтому они должны быть перемещены.Но тогда text-align: center; не работает на них.Я мог бы добиться этого, указав отступ для div-обертки влево, но на каждой странице будет разное количество страниц, так что это не сработает.Вот мой код:

.pagination {
  text-align: center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

Чтобы понять, чего я хочу:

Answer 1

Удаление float s и использование inline-block могут решить ваши проблемы:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(удалите строки, начинающиеся с -, и добавьте строки, начинающиеся с +.)

.pagination {
  text-align: center;
}
.pagination a {
  + display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

inline-block работает кросс-браузерно, даже в IE6, если элемент изначально является встроенным элементом.

Цитата quirksmode :

Встроенный блок помещается в строку (т. е. на той же строке, что и соседний контент), но он ведет себя как блок.

thisчасто может эффективно заменить числа с плавающей запятой:

Реальное использование этого значения - когда вы хотите дать встроенному элементу ширину.В некоторых случаях некоторые браузеры не допускают ширину реального встроенного элемента, но если вы переключитесь на display: inline-block, вам будет разрешено установить ширину. »(http://www.quirksmode.org/css/display.html#inlineblock).

Из W3C spec :

[inline-block] заставляет элемент генерировать контейнерный блок встроенного уровня.Внутренняя часть встроенного блока отформатирована как блок блока, а сам элемент отформатирован как элементарный блок встроенного уровня.

Answer 2

Так как много лет я использовал старый трюк, который я узнал в каком-то блоге, извините, я не помню имя, чтобы дать ему кредит.

В любом случае для центрирования плавающих элементов это должно работать:

Вам нужна такая структура:

    .main-container {
      float: left;
      position: relative;
      left: 50%;
    }
    .fixer-container {
      float: left;
      position: relative;
      left: -50%;
    }

<div class="main-container">
  <div class="fixer-container">
    <ul class="list-of-floating-elements">

      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>

    </ul>
  </div>
</div>

Хитрость заключается в том, чтобы оставить поплавок влево, чтобы контейнеры меняли ширину в зависимости от содержимого. Это вопрос местоположения: относительный и оставил 50% и -50% на два контейнера.

Хорошо, что это кросс-браузер и должен работать с IE7 +.

Answer 3

Простое центрирование поплавков .Просто используйте стиль для контейнера:

.pagination{ display: table; margin: 0 auto; }

измените поля для плавающих элементов:

.pagination a{ margin: 0 2px; }

или

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; } 

и оставьте все как есть.

Для меня это лучшее решение для отображения таких вещей, как меню или нумерация страниц.

Сильные стороны:

• кросс-браузер для любых элементов (блоков, списка-элементы и т. д.)

• простота

Слабые стороны:

• работает только тогда, когда все плавающие элементы находятся водна строка (которая обычно подходит для меню, но не для галерей).

@ arnaud576875 Использование элементов inline-block будет отлично работать (кросс-браузер) в этом случае в качестве пагинациисодержит только якоря (встроенные), без элементов списка или div:

Сильные стороны:

• работает для многострочных элементов.

Слабости:

• пробелы между элементами inline-block - работает так же, как пробел между словами.Это может вызвать некоторые проблемы при расчете ширины контейнера и полей стиля.Ширина зазоров не постоянна, но зависит от браузера (4-5 пикселей).Чтобы избавиться от этих пробелов, я бы добавил к коду arnaud576875 (не полностью протестирован):

  .pagination {word-spacing: -1em;}

  .pagination a {межстрочный интервал: .1em;}

• он не будет работать в IE6 / 7 для элементов блока и элементов списка

Answer 4

Установите width вашего контейнера в px и добавьте:

margin: 0 auto;

Ссылка .

Answer 5

Использование Flex

.pagination {
  text-align: center;
  display:flex;
  justify-content:center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

Answer 6

Я думаю, что лучше всего использовать margin вместо display.

т.е:.

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

Проверьте результат и код:

http://cssdeck.com/labs/d9d6ydif

Answer 7

text-align: center;
float: none;

Answer 8

IE7 не знает inline-block.Вы должны добавить:

display:inline;
zoom: 1;

Answer 9

Вы также можете сделать это, изменив .pagination, заменив «text-align: center» с двумя-тремя строками CSS для left, transform и, в зависимости от обстоятельств, позиции.

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

Answer 10

Добавьте это к вашему стилю

position:relative;
float: left;
left: calc(50% - *half your container length here);

* Если ширина вашего контейнера 50px, укажите 25px, если 10em - 5em.