Wat doet autoin margin:0 auto;?
Ik begrijp niet wat autodoet. Ik weet dat het soms het effect heeft van het centreren van objecten. Bedankt.
Antwoord 1, autoriteit 100%
Als je een widthhebt opgegeven voor het object waarop je margin: 0 autohebt toegepast, komt het object centraal in de bovenliggende container te staan.
Het specificeren van autoals de tweede parameter vertelt de browser in feite om automatisch de linker- en rechtermarges zelf te bepalen, wat het doet door ze gelijk in te stellen. Het garandeert dat de linker- en rechtermarge op dezelfde grootte worden ingesteld. De eerste parameter 0 geeft aan dat de boven- en ondermarge beide op 0 worden ingesteld.
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
Daarom, om u een voorbeeldte geven, als de ouder 100px is en het kind 50px, dan bepaalt de eigenschap autodat er 50px vrije ruimte is om te delen tussen margin-leften margin-right:
var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;
Wat zou geven:
margin-left:25;
margin-right:25;
Bekijk deze jsFiddle. U hoeft de bovenliggende breedte niet op te geven, alleen de breedte van het onderliggende object.
Antwoord 2, autoriteit 7%
auto: de browser stelt de marge in. Het resultaat hiervan is afhankelijk van de browser
marge:0 automatisch gespecificeerd
* top and bottom margins are 0
* right and left margins are auto
Antwoord 3, autoriteit 4%
Van de CSS-specificatie op Breedten en marges berekenen voor blokniveau, niet- elementen vervangen in normale stroom:
Als zowel ‘marge-links’ als ‘marge-rechts’ ‘auto’ zijn, zijn hun gebruikte waarden gelijk. Dit centreert het element horizontaal ten opzichte van de randen van het bevattende blok.
Antwoord 4, autoriteit 3%
margin:0 auto;
0is voor boven-onder en autovoor links-rechts. Dit betekent dat de linker- en rechtermarge de automatische marge zullen gebruiken, afhankelijk van de breedte van het element en de breedte van de container.
Als je een element in het midden wilt plaatsen, werkt margin:autoin het algemeen perfect. Maar het werkt alleen in blokelementen.
Antwoord 5
margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
0 is voor boven-beneden en automatisch voor links-rechts.
De browser stelt de marge in.
Antwoord 6
Het wordt duidelijker met wat uitleg over hoe de twee waarden werken.
De marge-eigenschap is een afkorting voor:
margin-top
margin-right
margin-bottom
margin-left
Hoe komt het dan dat er maar twee waarden zijn?
Nou, je kunt marge uitdrukken met vier waarden zoals deze:
margin: 10px, 20px, 15px, 5px;
wat zou betekenen 10px boven, 20px rechts, 15px onder, 5px links
Evenzo kun je ook met twee waarden als volgt uitdrukken:
margin: 20px 10px;
Dit geeft je een marge van 20px boven en onder en 10px links en rechts.
En als je het volgende instelt:
margin: 20px auto;
Dat betekent dan boven- en ondermarge van 20px en linker- en rechtermarge van automatisch. En automatisch betekent dat de linker/rechtermarge automatisch wordt ingesteld op basis van de container. Als uw element een blokelement is, wat betekent dat het een doos is en de volledige breedte van de weergave in beslag neemt, stelt u automatisch de linker- en rechtermarge in en daarom wordt het element gecentreerd.
Antwoord 7
Het is een kapotte/zeer moeilijk te gebruiken vervanging voor de “center”-tag. Het is handig als je gebroken tabellen en niet-werkende centrering voor blokken en tekst nodig hebt.