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ę:
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.
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+.
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
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
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 -->
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:
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;
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;
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.
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.
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ż
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