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ę:
Odpowiedzi:
Usunięcie
float
s i użycieinline-block
może rozwiązać problemy:(usuń linie zaczynające się od
-
i dodaj linie zaczynające się od+
.)Pokaż fragment kodu
inline-block
działa w różnych przeglądarkach, nawet w IE6, o ile element jest pierwotnie elementem wbudowanym.Cytat z quirksmode :
często może to skutecznie zastąpić pływaki:
Ze specyfikacji W3C :
źródło
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:
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 +.
źródło
margin: 0 auto;
w tym przypadkufloat: left;
nie było konieczne w dniu.main-container
i.fixer-container
.overflow: hidden;
Centrowanie pływaków jest łatwe . Wystarczy użyć stylu dla kontenera:
zmień margines dla elementów pływających:
lub
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:
@ 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:
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
źródło
Ustaw kontenera
width
napx
i dodać:Odniesienia .
źródło
Korzystanie z Flex
źródło
Myślę, że najlepszym sposobem jest użycie
margin
zamiastdisplay
.To znaczy:
Sprawdź wynik i kod:
http://cssdeck.com/labs/d9d6ydif
źródło
źródło
IE7 nie wie
inline-block
. Musisz dodać:źródło
Dodaj to do swojej stylizacji
* Jeśli szerokość twojego kontenera to 50px, włóż 25px, jeśli jest to 10em, wstaw 5em.
źródło
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.źródło
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.
źródło
Właśnie dodałem
do mojego menu css
zrobił też sztuczkę centrowania
źródło