Ik implementeer paginering en deze moet worden gecentreerd. Het probleem is dat de links als blok moeten worden weergegeven, dus moeten ze zwevend worden weergegeven. Maar dan werkt text-align: center;er niet op. Ik zou het kunnen bereiken door de wrapper div opvulling van left te geven, maar elke pagina heeft een ander aantal pagina’s, dus dat zou niet werken. Hier is mijn code:
.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 -->Antwoord 1, autoriteit 100%
Het verwijderen van floats en het gebruik van inline-blockkan je problemen oplossen:
.pagination a {
- display: block;
+ display: inline-block;
width: 30px;
height: 30px;
- float: left;
margin-left: 3px;
background: url(/images/structure/pagination-button.png);
}
(verwijder de regels die beginnen met -en voeg de regels toe die beginnen met +.)
Antwoord 2, autoriteit 36%
Sinds vele jaren gebruik ik een oude truc die ik in een blog heb geleerd, het spijt me dat ik de naam niet meer weet om hem credits te geven.
Hoe dan ook, om zwevende elementen te centreren zou dit moeten werken:
Je hebt een structuur als deze nodig:
.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>Antwoord 3, autoriteit 9%
Het centreren van drijvers is eenvoudig. Gebruik gewoon de stijl voor container:
.pagination{ display: table; margin: 0 auto; }
wijzig de marge voor zwevende elementen:
.pagination a{ margin: 0 2px; }
of
.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; }
en laat de rest zoals het is.
Het is voor mij de beste oplossing om dingen als menu’s of paginering weer te geven.
Sterke punten:
-
Cross-browser voor eventuele elementen (blokken, lijst-items enz.)
-
Simplicity
Zwakke punten:
- Het werkt alleen als alle drijvende elementen in één regel zijn (die meestal ok is voor menu’s, maar niet voor galerijen).
@ Arnaud576875 Het gebruik van Inline-Block Elementen zullen in dit geval geweldig (kruisbrowser) werken, omdat paginering gewoon ankers (inline) bevat, geen lijst-items of divs:
Sterke punten:
- werkt voor multiline-items.
WeKnesses:
-
GAPS tussen inline-blockelementen – het werkt op dezelfde manier als een ruimte tussen woorden. Het kan enkele problemen veroorzaken die de breedte van de container- en stylingmarges berekenen. GAPS-breedte is niet constant, maar het is browserspecifiek (4-5px).
Om van deze gaten af te komen, zou ik toevoegen aan Arnaud576875-code (niet volledig getest):. Paginatie {Word-spating: -1em; }
. Paginatie A {Word-spating: .1em; }
-
Het werkt niet in IE6 / 7 op blok- en lijst-items elementen
4, Autoriteit 3%
Gebruik 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 -->5
text-align: center;
float: none;
6
Ik denk dat de beste manier is met behulp van marginin plaats van display.
d.w.z.:
.pagination a {
margin-left: auto;
margin-right: auto;
width: 30px;
height: 30px;
background: url(/images/structure/pagination-button.png);
}
Controleer het resultaat en de code:
http://cssdeck.com/labs/d9d6ydif
7
U kunt dit ook doen door .paginationte wijzigen door “Text-Line: Center” te vervangen met twee tot drie regels van CSS voor links, transformeren en, afhankelijk van de omstandigheden, positie.
.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 -->Antwoord 8
IE7kent inline-blockniet.
Je moet toevoegen:
display:inline;
zoom: 1;
Antwoord 9
Voeg dit toe aan je styling
position:relative;
float: left;
left: calc(50% - *half your container length here);
*Als uw containerbreedte 50px is, plaatst u 25px, als het 10em is, plaatst u 5em.
Antwoord 10
<!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="https://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>
stap 1
maak twee of meer div’s die je wilt en geef ze een bepaalde breedte zoals 100px voor elk en laat ze naar links of rechts zweven
stap 2
vervorm deze twee div’s vervolgens in een andere div en geef deze de breedte van 200px. op deze div marge auto toepassen.
boem het werkt best goed. check het bovenstaande voorbeeld.
Antwoord 11
Gewoon toevoegen
left:15%;
in mijn css-menu van
#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}
deed de centreertruc ook