Удаление 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:

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

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

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

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

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

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

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

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

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

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

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

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

.pagination a{ margin: 0 2px; }

or

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

а остальное оставьте как есть.

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

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

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

• простота

Недостатки:

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

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

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

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

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

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

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

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

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

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

margin: 0 auto;

Справочник.

Использование 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 -->

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

I.e.:

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

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

http://cssdeck.com/labs/d9d6ydif

Вы также можете сделать это, изменив .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 -->

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

display:inline;
zoom: 1;

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

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

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

<!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, которые вы хотите, и дайте им определенную ширину, например 100 пикселей для каждого, затем поместите его влево или вправо

шаг 2

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

Просто добавляю

left:15%; 

в мое меню css

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

тоже сделал трюк с центрированием