Wdrażam paginację i musi być wyśrodkowana. Problem polega na tym, że linki muszą być wyświetlane jako blok, więc muszą być zmiennoprzecinkowe. Ale text-align: center;nie działa na nich. Mógłbym to osiągnąć, dodając lewe dopełnienie opakowania, ale każda strona będzie miała inną liczbę stron, więc to nie zadziała. Oto mój kod:

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

Aby uzyskać pomysł, czego chcę:

Usunięcie floats i użycie inline-blockmoże rozwiązać problemy:

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

(usuń linie zaczynające się od -i dodaj linie zaczynające się od +.)

.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 działa w różnych przeglądarkach, nawet w IE6, o ile element jest pierwotnie elementem wbudowanym.

Cytat z quirksmode :

Blok śródliniowy jest umieszczany wewnątrz (tj. W tym samym wierszu co sąsiednia treść), ale zachowuje się jak blok.

często może to skutecznie zastąpić pływaki:

Rzeczywiste zastosowanie tej wartości ma miejsce, gdy chcesz nadać elementowi wstawianemu szerokość. W niektórych okolicznościach niektóre przeglądarki nie zezwalają na szerokość rzeczywistego elementu śródliniowego, ale jeśli przejdziesz na display: inline-block, możesz ustawić szerokość. ” ( http://www.quirksmode.org/css/display.html#inlineblock ).

Ze specyfikacji W3C :

[blok-inline] powoduje, że element generuje kontener bloku na poziomie-inline. Wnętrze bloku śródliniowego jest sformatowane jako pudełko blokowe, a sam element jest sformatowany jako atomowe pudełko śródliniowe.

Od wielu lat używam starej sztuczki, której nauczyłem się na jakimś blogu, przepraszam, że nie pamiętam nazwiska, aby dać mu uznanie.

W każdym razie, aby wyśrodkować elementy pływające, powinno to działać:

Potrzebujesz takiej struktury:

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

sztuczka polega na pozostawieniu liczby zmiennoprzecinkowej w lewo, aby pojemniki zmieniły szerokość w zależności od zawartości. Niż kwestia pozycji: względna i pozostawiona 50% i -50% na dwóch pojemnikach.

Dobrą rzeczą jest to, że jest to przeglądarka internetowa i powinna działać z IE7 +.

Centrowanie pływaków jest łatwe . Wystarczy użyć stylu dla kontenera:

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

zmień margines dla elementów pływających:

.pagination a{ margin: 0 2px; }

lub

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

i zostaw resztę taką, jaka jest.

To najlepsze rozwiązanie dla mnie, aby wyświetlić takie rzeczy jak menu lub paginacja.

Silne strony:

• przeglądarka dla dowolnych elementów (bloków, elementów listy itp.)

• prostota

Słabości:

• działa tylko wtedy, gdy wszystkie elementy pływające znajdują się w jednej linii (co zwykle jest poprawne w przypadku menu, ale nie w przypadku galerii).

@ arnaud576875 Korzystanie z elementów bloku wbudowanego będzie w tym przypadku działało świetnie (w różnych przeglądarkach), ponieważ paginacja zawiera tylko kotwice (wbudowane), bez elementów listy lub div:

Silne strony:

• działa na elementy wielowierszowe.

Weknesses:

• luki między elementami bloku śródliniowego - działa tak samo jak odstęp między słowami. Może to powodować pewne problemy przy obliczaniu szerokości pojemnika i marginesów stylizacji. Szerokość szczelin nie jest stała, ale jest specyficzna dla przeglądarki (4-5px). Aby pozbyć się tych luk, dodałbym do kodu arnaud576875 (nie w pełni przetestowany):

  .pagination {odstępy między wyrazami: -1em; }

  .pagination a {odstępy między słowami: .1em; }

• nie będzie działać w IE6 / 7 na elementach bloku i elementach listy

Ustaw kontenera widthna pxi dodać:

margin: 0 auto;

Odniesienia .

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

Myślę, że najlepszym sposobem jest użycie marginzamiast display.

To znaczy:

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

Sprawdź wynik i kod:

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;

IE7 nie wie inline-block. Musisz dodać:

display:inline;
zoom: 1;

Dodaj to do swojej stylizacji

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

* Jeśli szerokość twojego kontenera to 50px, włóż 25px, jeśli jest to 10em, wstaw 5em.

Możesz to również zrobić, zmieniając .pagination, zastępując „wyrównanie tekstu: wyśrodkuj” dwoma lub trzema wierszami css dla lewej, transformacji i, w zależności od okoliczności, pozycji.

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

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

krok 1

utwórz dwa lub więcej div, które chcesz i nadaj im określoną szerokość, np. 100 pikseli dla każdego z nich, a następnie ustaw go w lewo lub w prawo

krok 2

następnie wypacz te dwa div w innym div i nadaj mu szerokość 200px. do tego div stosuje margines auto. boom to działa całkiem dobrze. sprawdź powyższy przykład.

Właśnie dodałem

left:15%; 

do mojego menu css

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

zrobił też sztuczkę centrowania