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

356

Я осуществляю нумерацию страниц, и она должна быть центрирована. Проблема в том, что ссылки должны отображаться в виде блоков, поэтому они должны быть перемещены. Но тогда 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 -->
Развернуть фрагмент

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

альтернативный текст

css-float  center  css 
— Майк
источник
Вся цель свойства float - разместить элемент вдоль левой или правой стороны его контейнера.
— Роб
3
@Rob: Ну, мне нужно было определить ширину и высоту для элементов ссылки, что можно сделать только для элементов блока, но когда вы создаете блок ссылок, они растягиваются на каждой новой строке, поэтому я сделал их плавающими.
— Майк
Альтернативное решение, когда вы не хотите / не можете использовать встроенный блок. stackoverflow.com/questions/1232096/…
— hakunin
1
Я считаю, что этот вопрос заслуживает внимания модератора, поскольку его нынешнее название и ответы вводят в заблуждение. Вопрос не в плавающем контенте в центре, а в центрировании контента. Плавающий означает, что неплавающее содержание одного и того же брата должно заполнить оставшиеся пробелы, и это явно ни желательно, ни достигнуто.
— дао
8
@AndreiGheorghiu, если вы так думаете, предложите отредактировать вместо того, чтобы отмечать его как моды. Любой может редактировать эти вопросы, поэтому отредактируйте вопрос и напишите подробное объяснение причины редактирования. Это то, что может сделать любой пользователь, он не должен быть модератором. Нет ничего плохого в вопросе или ответах, требующих вмешательства модератора
— Zoe

Ответы:

407

Удаление floats и использование 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);
 }

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

Показать фрагмент кода

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

Цитата из quirksmode :

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

это часто может эффективно заменить поплавки:

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

Из спецификации W3C :

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

— Арно Ле Блан
источник
10
Совет: не забудьте про вертикальное выравнивание.
— Synexis
5
Да, это один из немногих случаев, когда я обнаружил, что вертикальное выравнивание действительно делает то, что вы ожидаете.
— Майк Терли
4
Недостатком этого метода является то, что трудно контролировать горизонтальный интервал, так как между элементами могут появляться пробелы.
— Ксавье Поинас
@XavierPoinas: используйте размер шрифта: 0; на родителя, чтобы решить эту проблему
— roelleor
Имейте в виду, что "font-size: 0" раньше не работал на устройствах Android. Не уверен, если это все еще верно для последних версий.
— Андреас Баумгарт
150

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

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

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

    .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 +.

— lukart
источник
1
Напоминание о том, что это работает, если имеется только один элемент с плавающей точкой.
— Wtower
Проблема в том, что появится горизонтальная полоса прокрутки, потому что внешний div проходит за пределы экрана. Кроме того, когда список переносится на другую строку, все это переходит в левое выравнивание.
— cleversprocket
Это не будет иметь значения без установки максимальной ширины контейнера, margin: 0 auto;лучше
— справится с
1
Для меня float: left;не было необходимости на .main-containerи .fixer-container.
— csum
@cleversprocket Я решил горизонтальную прокрутку, обернув все в один div сoverflow: hidden;
— csum
36

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

.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 будет прекрасно работать (кросс-браузер) в этом случае, поскольку разбиение на страницы содержит только якоря (inline), никаких элементов списка или элементов div:

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

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

Weknesses:

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

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

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

  • он не будет работать в IE6 / 7 для элементов block и list-items

— romprzy
источник
Дисплей: таблица трюк невероятно просто сделал все, как следует, всего за несколько строк. Мне нужно это запомнить. Приветствия
— килоп
Техника inline-block работает очень хорошо. К счастью, элементы, которые я использую (вложенные элементы div), могут хорошо справляться с разрывом.
— Каролус
Вы также можете удалить пробелы встроенного блока, уменьшив размер шрифта до нуля, а затем восстановив прежнее значение внутри дочерних элементов
— Mike Causer
15

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

margin: 0 auto;

Ссылка .

— гулянка
источник
1
для меня это лучший ответ: P.
— alansiqueira27
3
Это будет работать только в том случае, если ширина контейнера будет подходящей, что является проблемой, когда он содержит плавающие элементы.
— Wtower
11

Использование 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 -->
Развернуть фрагмент

— Сантош Халсе
источник
5

Я думаю, что лучший способ использовать 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

— Tarod
источник
1
Работает только с полем: авто; вместо индивидуальных свойств left & right тоже.
— cellepo
1

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

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

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

— 11-
источник
1

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

.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 -->
Развернуть фрагмент

— mwag
источник
0 
<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

шаг 1

создайте два или более div, которые вы хотите, и дайте им определенную ширину, например, 100px для каждого, затем поместите их влево или вправо

шаг 2

затем перетащите эти два div в другой div и дайте ему ширину 200px. к этому div примените маржу auto. бум это работает довольно хорошо. проверьте приведенный выше пример.

-1

Просто добавив

left:15%;

в мое меню CSS 

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

сделал фокусировку тоже

— user3085662
источник
4
15% просто произвольно.
— Wtower
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.