Om de een of andere reden worden mijn div’s niet horizontaal gecentreerd in een bevattende div:
.row {
width: 100%;
margin: 0 auto;
}
.block {
width: 100px;
float: left;
}<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>Antwoord 1, autoriteit 100%
Om te bereiken wat u probeert te doen:
Overweeg het gebruik van display: inline-blockin plaats van float.
Antwoord 2, autoriteit 34%
Probeer dit:
.row {
width: 100%;
text-align: center; // center the content of the container
}
.block {
width: 100px;
display: inline-block; // display inline with ability to provide width/height
}
-
met
margin: 0 auto;samen metwidth: 100%is nutteloos omdat je element de volledige ruimte in beslag neemt. -
float: leftzal de elementen naar links laten zweven, totdat er geen ruimte meer over is, dus komen ze op een nieuwe regel. Gebruikdisplay: inline-blockom elementen inline weer te geven, maar met de mogelijkheid om grootte op te geven (in tegenstelling totdisplay: inlinewaarbij breedte/hoogte worden genegeerd)
Antwoord 3, Autoriteit 13%
Afstemming in CSS was een nachtmerrie geweest. Gelukkig wordt een nieuwe standaard geïntroduceerd door W3C in 2009: flexibele doos . Er is een goede tutorial over het hier . Persoonlijk vind ik het veel logischer en gemakkelijker te begrijpen dan andere methoden.
.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block {
width: 100px;
}<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>Antwoord 4, Autoriteit 6%
Flexbox gebruiken:
<div class="row">
<div class="block">Lorem</div>
<div class="block">Ipsum</div>
<div class="block">Dolor</div>
</div>
.row {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center; /* for centering 3 blocks in the center */
/* justify-content: space-between; for space in between */
}
.block {
width: 100px;
}
De nieuwste trend is om Flex of CSS-raster te gebruiken in plaats van het gebruik van float. Maar nog steeds 1% browsers ondersteunen de flex niet. Maar die eigenlijk om oude IE-gebruikers geeft;)
Fiddle: Controleer hier
Antwoord 5, autoriteit 5%
Nog een werkvoorbeeld, met gebruik van display: inline-blocken text-align: center
HTML:
<div class='container'>
<div class='row'>
<div class='btn'>Hello</div>
<div class='btn'>World</div>
</div>
<div class='clear'></div>
</div>
CSS:
.container {
...
}
.row {
text-align: center;
}
.btn {
display: inline-block;
margin-right: 6px;
background-color: #EEE;
}
.clear {
clear: both;
}
Fiddle: http://jsfiddle.net/fNvgS/
Antwoord 6, autoriteit 4%
Hoewel deze vraag niet beantwoord wordt (omdat je de <div>s binnen de container wilt uitlijnen), maar direct gerelateerd: als je slechts één div horizontaal wilt uitlijnen, kun je dit doen:
#MyDIV
{
display: table;
margin: 0 auto;
}
Antwoord 7, autoriteit 2%
Als elementen op één regel moeten worden weergegeven en IE 6/7 er niet toe doet, overweeg dan om display: tableen display: table-cellte gebruiken in plaats van float.
inline-blockleidt tot horizontaal hiaten tussen elementen en vereist een zager die hiaten. De meest eenvoudige manier is om font-size: 0voor ouderelement en vervolgens herstellen font-sizevoor kinderelementen die display: inline-blockDoor hun font-sizein te stellen op een pxof remWAARDE.
Antwoord 8, Autoriteit 2%
Ik heb het geaccepteerde antwoord geprobeerd, maar uiteindelijk ontdekte dat:
margin: 0 auto;
width: anything less than 100%;
werkt tot nu toe goed.
Antwoord 9
Ik heb deze twee benaderingen gebruikt als ik moet omgaan met horizontale div-uitlijning.
eerst (Centrum uitlijnen met behulp van de marge-eigenschap ):
.center-horizontal-align {
margin-left: auto;
margin-right: auto;
width: (less than 100%) or in px
}
De linker- en rechtermarges instellen om automatisch te specificeren dat ze de beschikbare marge eveneens moeten splitsen. Centre-uitlijning heeft geen effect als de breedte 100% is.
en de tweede:
.center-horizontal-align {
display: table
margin-left: auto;
margin-right: auto;
}
Het gebruik van de tweede aanpak is handig als je verschillende elementen hebt en je wilt dat ze allemaal gecentreerd zijn in één tafelcel (d.w.z. verschillende knoppen in één cel).