Jak wyśrodkować elementy pływające?

354

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

alternatywny tekst

Mikrofon
źródło
Głównym celem właściwości float jest umieszczenie elementu wzdłuż lewej lub prawej strony jego kontenera.
Rob
3
@Rob: Cóż, musiałem zdefiniować szerokość i wysokość dla elementów łączących, co można zrobić tylko na elementach blokowych, ale kiedy blokujesz łącza, każdy z nich rozkłada się na nowej linii, dlatego sprawiłem, że były one pływające.
Mike
Alternatywne rozwiązanie, gdy nie chcesz / nie możesz użyć bloku wbudowanego. stackoverflow.com/questions/1232096/…
hakunin
1
Uważam, że to pytanie zasługuje na uwagę moderatora, ponieważ jego obecny tytuł i odpowiedzi wprowadzają w błąd. Pytanie nie dotyczy pływającej zawartości w środku, ale centrowania zawartości. Liczba zmiennoprzecinkowa oznacza, że ​​nierozpuszczalna zawartość rodzeństwa powinna wypełnić pozostałe luki, co wyraźnie nie jest ani pożądane, ani osiągnięte w tym przypadku.
tao
8
@AndreiGheorghiu, jeśli tak uważasz, zasugeruj edycję zamiast oflagować go dla modów. Każdy może edytować te pytania, więc edytuj pytanie i napisz szczegółowe wyjaśnienie przyczyny. Jest to coś, co każdy użytkownik może zrobić, nie musi to być moderator. Nie ma nic złego w pytaniu lub odpowiedziach wymagających interwencji moderatora
Zoe

Odpowiedzi:

406

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

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.

Arnaud Le Blanc
źródło
10
Wskazówka: nie zapomnij o wyrównaniu w pionie.
Synexis,
5
Tak, jest to jeden z niewielu przypadków, w których znalazłem, gdzie wyrównanie pionowe faktycznie robi to, czego się spodziewasz.
Mike Turley,
4
Minusem tej metody jest to, że trudno jest kontrolować odstępy poziome, ponieważ między elementami mogą pojawić się białe znaki.
Xavier Poinas,
@XavierPoinas: użyj rozmiaru czcionki: 0; na rodzica, aby naprawić ten problem
roelleor
Pamiętaj jednak, że „rozmiar czcionki: 0” nie działał na urządzeniach z Androidem. Nie jestem pewien, czy nadal tak jest w przypadku najnowszych wersji.
Andreas Baumgart
150

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

lukart
źródło
1
Przypomnienie, że działa to, jeśli jest tylko jeden pojedynczy element pływający.
Wtower,
Problem polega na tym, że pojawi się poziomy pasek przewijania, ponieważ zewnętrzny div rozciąga się poza ekran. Również, gdy lista zawija się do innego wiersza, wówczas cała rzecz idzie w lewo.
cleversprocket
To nie zrobi różnicy bez ustawienia maksymalnej szerokości kontenera, margin: 0 auto;w tym przypadku
lepiej sobie radzi
1
Dla mnie float: left;nie było konieczne w dniu .main-containeri .fixer-container.
csum
@cleversprocket Rozwiązałem przewijanie w poziomie, zawijając wszystko w jednym divoverflow: hidden;
csum
36

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

romprzy
źródło
display: trik przy stole jest niewiarygodny, po prostu zrobił wszystko tak, jak powinien, z zaledwie kilkoma liniami. Muszę to pamiętać. Na zdrowie
kilop
Technika blokowania liniowego działa wyjątkowo dobrze. Na szczęście elementy, których używam (zagnieżdżone elementy div), dobrze radzą sobie z luką.
karolus
Możesz również usunąć luki w bloku wstawiania, zmniejszając rozmiar czcionki do zera, a następnie przywracając poprzednią wartość w elementach podrzędnych
Mike Causer
15

Ustaw kontenera widthna pxi dodać:

margin: 0 auto;

Odniesienia .

AMB
źródło
1
dla mnie to najlepsza odpowiedź: P.
alansiqueira27
3
Działałoby to tylko wtedy, gdy szerokość kontenera jest odpowiednia, co stanowi problem, gdy zawiera on elementy pływające.
Wtower,
11

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

Santosh Khalse
źródło
5

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

Tarod
źródło
1
Działa z marginesem: auto; zamiast indywidualnych właściwości lewej i prawej.
cellepo
3
text-align: center;
float: none;
Michał
źródło
2

IE7 nie wie inline-block. Musisz dodać:

display:inline;
zoom: 1;
Krisada Art
źródło
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.

11
źródło
1

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

mwag
źródło
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>

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.

noel jose
źródło
-1

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

użytkownik3085662
źródło
4
15% jest po prostu arbitralne.
Wtower,