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

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

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

чтобы получить представление, что я хочу:

11 311
css centering css-float

11 ответов:

удаление 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);
 }

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

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

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

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

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

от W3C spec:

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

361

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

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

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

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

133

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

.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), нет списка элементов или divs:

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

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

Weknesses:

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

    .разбиение на страницы{ интервал между словами: - 1em;}

    .пагинация в{ интервал между словами: .1em;}

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

29

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

margin: 0 auto;

ссылка.

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

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

3

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

display:inline;
zoom: 1;
2
text-align: center;
float: none;
2

добавить это к вам стиль

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

*если ваш контейнер шириной 50px положить 25px, если это 10em положить 5em.

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 применяется margin auto. бум это работает довольно хорошо. проверьте приведенный выше пример.

0

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

left:15%;

в мое меню css 

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

сделал центрирующий трюк тоже

-1