Jak wyśrodkować elementy float?

Wdrażam paginację i musi być wyśrodkowana. Problem polega na tym, że linki muszą być wyświetlane jako blokowe, więc muszą być floatowane. Ale wtedy, text-align: center; nie działa na nich. Mógłbym to osiągnąć, dając wrapper div padding lewej, 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ę:

alt text

Author: CalvT, 2011-01-22
Source

11 answers

Usunięcie float s, i użycie inline-block może rozwiązać Twoje 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 między przeglądarkami, nawet na IE6, o ile element jest pierwotnie elementem wbudowanym.

Cytat z quirksmode :

Inline block jest umieszczony inline (tj. na tej samej linii co sąsiednia zawartość), ale zachowuje się jak blok.

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

Rzeczywiste użycie tej wartości jest wtedy, gdy chcesz nadać elementowi inline szerokość. W pewnych okolicznościach niektóre przeglądarki nie zezwalają na szerokość rzeczywistego elementu inline, ale jeśli przełączysz się na display: inline-block, możesz ustawić szerokość."( http://www.quirksmode.org/css/display.html#inlineblock ).

Z W3C spec :

[inline-block] powoduje, że element generuje poziom inline Pojemnik blokowy. Wewnątrz bloku inline jest sformatowany jako block box, a sam element jest sformatowany jako atomic inline-level box.

 361
Author: arnaud576875,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-28 11:06:07

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

W każdym razie aby wyśrodkować elementy pływające powinno 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 oddaniu float ' a w lewo, aby kontenery zmieniały szerokość w zależności od zawartości. Niż jest kwestia położenia: względne i lewo 50% i -50% na dwóch pojemnikach.

Dobre jest to, że to cross browser i powinien działać z IE7+.

 133
Author: lukart,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-24 06:51:55

Centrowanie pływaków jest łatwe . Po prostu użyj stylu dla kontenera: 

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

Zmiana marginesu dla elementów pływających: 

.pagination a{ margin: 0 2px; }

Lub 

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }
A resztę zostaw tak, jak jest.

Jest to dla mnie najlepsze rozwiązanie do wyświetlania rzeczy takich jak menu lub paginacja.

Moc:

  • Cross-browser dla dowolnych elementów (bloków, list-itemów itp.)

  • Prostota

Słabe strony:

  • działa tylko wtedy, gdy wszystkie elementy pływające są w jednej linii (co zwykle jest ok dla menu, ale nie dla galerii).

@arnaud576875 użycie inline-block elements będzie działać świetnie (cross-browser) w tym przypadku, ponieważ paginacja zawiera tylko kotwice (inline), bez list-items lub divs:

Moc:

  • Działa dla elementów wielowierszowych.

Weknesses:

  • Odstępy między elementami inline-block - działa tak samo jak odstęp między wyrazami. Informatyka może powodować problemy z obliczaniem szerokości kontenera 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 do końca przetestowany):

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

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

  • Nie będzie działać w IE6/7 na elementach block i list-items

 29
Author: romprzy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-05 21:32:58

Ustaw width w px i dodaj: 

margin: 0 auto;

Odniesienie .

 11
Author: AMB,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-02 17:26:25

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 -->
 7
Author: Santosh Khalse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-25 07:28:41

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

Czyli:

.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

 3
Author: Tarod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-28 06:49:39

IE7 nie wie inline-block. Musisz dodać: 

display:inline;
zoom: 1;
 2
Author: Krisada Art,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-02 17:25:53 
text-align: center;
float: none;
 2
Author: Michael,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-22 11:09:34

Dodaj to do siebie 

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

*jeśli szerokość kontenera wynosi 50px umieść 25px, jeśli jest 10em umieść 5em.

 0
Author: 11-,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 21:00:14 
<!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-ów, które chcesz i daj im określoną szerokość jak 100px dla każdego, a następnie float to w lewo lub w prawo

Krok 2

Następnie wypnij te dwa div w inny div I daj mu szerokość 200px. do tego pola zastosuj marżę Auto. działa całkiem nieźle. sprawdź powyższy przykład.

 0
Author: noel jose,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-06 13:58:19

Just adding 

left:15%;

Do mojego menu css 

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

Czy sztuczka centrowania też

 -1
Author: user3085662,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-05 18:15:13