Varför fungerar inte marginal 0 automatiskt? Centrering av absolut placerade element

Beskrivning

Ställer in mängden stoppning från varje kant av elementet. Marginalen är utrymmet från gränsen för det aktuella elementet till den inre gränsen för dess överordnade element (fig. 1).

Ris. 1. Indrag från elementets vänstra kant

Om elementet inte har en förälder, kommer utfyllnaden att vara avståndet från kanten av elementet till kanten av webbläsarfönstret, med hänsyn till att själva fönstret också har utfyllnad som standard. För att bli av med dem bör du ställa in marginalvärdet för väljaren lika med noll.

Margin-egenskapen låter dig ställa in marginalvärdet för alla sidor av ett element samtidigt eller definiera det bara för specificerade sidor.

Syntax

marginal: [värde | intresse | auto] (1,4) | ärva

Värderingar

Du kan använda ett, två, tre eller fyra värden, åtskilda av ett mellanslag. Effekten beror på antalet värden och visas i tabellen. 1.

Mängden indrag kan anges i pixlar (px), procent (%) eller andra acceptabla värden. CSS-enheter. Värdet kan vara antingen ett positivt eller negativt tal.

Auto Anger att mängden indrag kommer att beräknas automatiskt av webbläsaren. ärver Ärver värdet av föräldern.

HTML5 CSS2.1 IE Cr Op Sa Fx

Resultat detta exempel visas i fig. 2.

Ris. 2. Tillämpa marginalegenskapen

Objektmodell

document.getElementById("elementID ").style.margin

Webbläsare

Internet Explorer 6 i kompatibilitetsläge (quirk-läge) stöder inte centrering av blocket med marginalen: 0 autoregel. Det finns också en bugg i den här webbläsaren med fördubbling av vänster eller höger utfyllnadsvärde för flytande element kapslade i överordnade element. Marginalen som ligger i anslutning till förälderns sida fördubblas. Problemet löses vanligtvis genom att lägga till display: inline till det flytande elementet.

Internet Explorer-versioner upp till och inklusive 7.0 stöder inte ärvt värde.

Notera

För blockelement placerade bredvid varandra vertikalt observeras en kollapsande effekt när indragen inte summeras, utan kombineras med varandra. Själva kollapsen verkar på två eller flera block (ett kan vara kapslat inuti ett annat) med indrag upptill eller nedtill, medan intilliggande indrag kombineras till en. För vänster och höger stoppning tillämpas aldrig kollapsning.

Komprimering fungerar inte:

• för element som har utfyllnadsegenskapen inställd på den kollapsande sidan.
• för element som har en gräns specificerad på den kollapsande sidan;
• på element med absolut positionering, dvs. de vars position är satt till absolut;
• på flytande element (för dem flyta egendom ges som vänster eller höger );
• för inline-element;
• För .

Internet Explorer är ett problem som förstör livet för de flesta webbutvecklare. Mer än 60 % av utvecklingstiden kan ägnas åt att lösa dessa specifika problem, vilket inte är det effektiv användning tid. I den här artikeln kommer jag att prata om de mest populära buggarna och inkonsekvenserna i positionering, samt hur man enklast löser dessa problem.

1. Mittpositionering.

Varje webbutvecklare, när de lade ut en webbplats, ställdes inför behovet av att anpassa ett element i mitten. Det enklaste och populäraste sättet är att skriva marginal: auto; . Denna metod låter dig centrera ett element oavsett skärmupplösning. Den här metoden fungerar dock inte i IE6.

Tänk på följande kod:

#container ( kantlinje: fast 1px #000; bakgrund: #777; bredd: 400px; höjd: 160px; marginal: 30px 0 0 30px; ) #element (bakgrund: #95CFEF; kant: fast 1px #36F; bredd: 300px; höjd: 100px marginal: 30px auto)

Förväntat resultat:

Men Internet Explorer visar dig följande:

Detta händer eftersom IE6 inte känner igen värdet automatisk inställning marginalegenskap. Lyckligtvis är detta lätt att fixa.

Låt oss fixa det.

Det enklaste och mest beprövade sättet att centrera ett element i IE6 är att skriva text-alignL center på det överordnade elementet och tillämpa tex-align: vänster till det själv så att dess innehåll justeras korrekt.

#container( kantlinje: fast 1px #000; bakgrund: #777; bredd: 400px; höjd: 160px; marginal: 30px 0 0 30px; text-align: center;) #element( bakgrund: #95CFEF; kant: fast 1px #36F; bredd: 300px; höjd: 100px; marginal: 30px 0; text-align: vänster; }

2. Stegeffekt

Nästan varje utvecklare använder listor för att skapa navigering. Vanligtvis skapas ett containerelement, de nödvändiga länkarna finns inuti det, och sedan ställs float-egenskapen in med den önskade riktningen. Tänk på följande exempel:

Ul ( list-stil: ingen; ) ul li a ( display: block; bredd: 130px; höjd: 30px; text-align: center; färg: #fff; flytande: vänster; bakgrund: #95CFEF; kant: fast 1px # 36F;marginal: 30px 5px)

Vi får följande:

Däremot kommer IE att visa oss:

Inte särskilt vänlig navigering, eller hur? Det finns dock två sätt att fixa detta obehagliga beteende.

1:a metoden

Det enklaste sättet är att ställa in float-egenskapen inte till länkar, utan till element i li-listan.

Ul li ( flyta: vänster; )

2:a metoden

Det andra sättet är att tillämpa egenskapen display: inline på li-elementet. Dessutom fixar vi en bugg med dubbel marginal, vilket beskrivs nedan.

Ul li (display: inline)

3. Dubbel indrag för element med flytegenskapsuppsättningen

Det är väldigt enkelt att återskapa detta fel. Ställ in elementet att flyta: vänster och sedan stoppning. Som ett resultat får vi en indragning dubbelt så stor som specificerat.

Låt oss titta på ett exempel:

#element( bakgrund: #95CFEF; bredd: 300px; höjd: 100px; flytande: vänster; marginal: 30px 0 0 30px; kant: fast 1px #36F; )

Förväntat resultat:

Men i IE6 kommer vi att se följande:

Vi fixar det

Detta korrigeras på samma sätt som problemet med effekten av steg. Det vill säga vi ställer in egenskapen display: inline för elementet. Vår kod kommer att ändras så här:

#element( bakgrund: #95CFEF; bredd: 300px; höjd: 100px; flytande: vänster; marginal: 30px 0 0 30px; kant: fast 1px #36F; display: inline; }

4. Element med liten höjd.

Ibland är det nödvändigt att skapa element med liten höjd, till exempel för att använda dem som designelement. Det första sättet som kom att tänka på var att ställa in höjden. Däremot kommer IE att visa dig något helt annat än vad du förväntar dig.

Resultatet är ett element med en höjd på 2px och en kant på 1px.

Låt oss fixa det.

Anledningen till denna bugg är mycket enkel: IE ändrar helt enkelt höjden på elementet till en höjd som är lika med teckenstorleken. Således ställer vi helt enkelt teckenstorleken till noll.

#element( bakgrund: #95CFEF; kant: fast 1px #36F; bredd: 300px; höjd: 2px; marginal: 30px 0; teckenstorlek: 0; }

Andra tillvägagångssättet

Annan bra sätt- detta är för att använda overflow-egenskapen, du måste använda det dolda värdet. Och då kommer elementet att ha den önskade höjden.

#element( bakgrund: #95CFEF; kant: fast 1px #36F; bredd: 300px; höjd: 2px; marginal: 30px 0; overflow: gömd; }

5. Bräddning och relativ placering av element.

Denna bugg uppstår när det överordnade elementet har egenskapen overflow: auto, och barnet är placerat i förhållande till det, det vill säga dess position: relativ egenskap är inställt. Det visar sig att barnelement ligger så att säga ovanpå föräldern. Låt oss titta på ett exempel:

#element( bakgrund: #95CFEF; kant: fast 1px #36F; bredd: 300px; höjd: 150px; marginal: 30px 0; overflow: auto; ) #annat element( bakgrund: #555; bredd: 150px; höjd: 175px; position : relativ marginal: 30px )

Förväntat resultat:

Resultat i IE:

Låt oss fixa det.

Det enklaste sättet att lösa problemet är att ge moderelementet en relativ positionering.

#element( bakgrund: #95CFEF; kant: fast 1px #36F; bredd: 300px; höjd: 150px; marginal: 30px 0; spill: auto; position: relativ; }

6. Boxmodell

Internet Explorer tolkar boxmodellen felaktigt.

Till exempel finns det 2 div-element. En med buggen fixad och den andra inte. Det kommer att finnas en skillnad i storlek mellan dem lika med summan av de inre stoppningarna.

Vi fixar det

Jag ska berätta om rätt modell i en annan artikel, men nu ska jag bara visa dig hur du fixar det.

Poängen är att för IE5/6 måste höjd och bredd ställas in separat. Jag gör till exempel så här:

För alla webbläsare

#element( bredd: 400px; höjd: 150px; utfyllnad: 50px; )

För IE måste du göra detta:

#element ( bredd: 400px; höjd: 150px; \height: 250px; \width: 500px )

I huvudsak lägger du till utfyllnadsvärden till elementets dimensioner för IE6.

7. Ställa in minsta storlekar.

Minsta bredd och höjd är helt enkelt oersättliga när man skapar en vacker design. Tyvärr ignorerar IE egenskaperna min-höjd och min-bredd.

Vi fixar det

För att lösa problemet, låt oss använda den!viktiga identifieraren.

#element (min-höjd: 150px; höjd: auto !viktigt; höjd: 150px;)

Andra alternativet.

Om vi ​​tar hänsyn till det faktum att IE inte förstår kapslade väljare, kan vi göra så här:

#element ( min-höjd: 150px; höjd: 150 px; ) html>body #element ( höjd: auto; )

8. Felaktigt beteende i floatmodellen.

Ett av de viktigaste koncepten i tabelllös layout med CSS är float. Oftast hanterar IE6 detta korrekt, men ibland uppstår problem. Till exempel när innehållet är icke-brytande eller bredden på elementet är större än bredden på det överordnade. I dessa fall bryts uppmärkningen. Låt oss se ett exempel.

#element, #annatelement( bakgrund: #95CFEF; kant: fast 1px #36F; bredd: 100px; höjd: 150px; marginal: 30px; stoppning: 10px; flyta: vänster; ) #container( bakgrund: #C2DFEF; kant: fast 1px #36F marginal: 30px;

Fick det i IE:

Som du kan se har den första div-delen expanderat för att passa innehållets bredd och tryckt in den intilliggande till nästa rad.

Vi fixar det

Det finns ingen vacker lösning. Men du kan till exempel tillämpa overflow: hidden property, men då kommer innehållet att skäras av och en del av det kommer inte att synas.

#element( bakgrund: #C2DFEF; kant: fast 1px #36F; bredd: 365px; marginal: 30px; utfyllnad: 5px; överflöde: dold; )

9. Extra mellanslag mellan listobjekt.

IE 6 lägger till extra utfyllnad till vertikala listor. Låt oss titta på ett exempel.

• Länk 1
• Länk 2
• Länk 3

Ul ( margin:0; padding:0; list-style:none; ) li a ( bakgrund: #95CFEF; display: block; )

Hur det ska se ut:

Vad IE visar:

1:a metoden

Det enklaste sättet är att ange bredd eller höjd för länken.

Li a ( bakgrund: #95CFEF; display: block; bredd: 200px; }

2:a metoden

Nästa sätt är att ställa flytande: vänster och sedan rensa den.

Li a (bakgrund: #95CFEF; flyta: vänster; klara: vänster; }

3:e metoden

Det tredje sättet är att ställa in displayen: inline på li-elementet. Vilket förresten kommer att fixa dubbelmarginalfelet som beskrivs ovan.

Hur många kopior har redan brutits om uppgiften att justera element på en sida. Jag uppmärksammar dig på en översättning av en utmärkt artikel med en lösning på detta problem från Stephen Shaw för Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Vi visste alla om marginal: 0 auto; för horisontell centrering, men marginal: auto; fungerade inte för vertikal. Detta kan enkelt fixas genom att helt enkelt ställa in höjden och tillämpa följande stilar:

Absolut-Center (marginal: auto; position: absolut; topp: 0; vänster: 0; nedre: 0; höger: 0; )
Jag är inte den första som föreslår den här lösningen, men det här tillvägagångssättet används sällan när vertikal inriktning. I kommentarerna till artikeln How to Centre Anything With CSS hänvisar Simon till ett jsFiddle-exempel som ger perfekt lösning för vertikal centrering. Här är några fler om detta ämne.

Låt oss titta närmare på metoden.

Fördelar

• Kompatibilitet över webbläsare (inklusive IE 8-10)
• Ingen ytterligare markering, minimal styling
• Anpassningsförmåga
• Oberoende från stoppning(utan boxstorlek!)
• Fungerar för bilder

Brister

• Höjden måste anges (se Variabel höjd)
• Det rekommenderas att ställa in spill: auto så att innehållet inte sprids
• Fungerar inte på Windows Phone

Webbläsarkompatibilitet

Metoden har testats och fungerar utmärkt i Chrome, Firefox, Safari, Mobile Safari och även IE 8-10. En användare nämnde att innehållet inte är vertikalt justerat på Windows Phone.

Inuti behållaren

Innehåll placerat i en behållare med position: relativ kommer att passa perfekt:

Absolut-Center ( bredd: 50 %; höjd: 50 %; bräddavlopp: auto; marginal: auto; position: absolut; topp: 0; vänster: 0; botten: 0; höger: 0; )

Använder viewport

Låt oss ställa in innehållet till position: fix och ställa in z-index:

Absolute-Center.is-Fixed ( bredd: 50 %; höjd: 50 %; bräddavlopp: auto; marginal: auto; position: fast; topp: 0; vänster: 0; botten: 0; höger: 0; z-index: 999;

Anpassningsförmåga

Den största fördelen med den beskrivna metoden är att den fungerar perfekt när höjden eller bredden anges i procent, och till och med förståelse min-bredd/max-bredd Och min-höjd/max-höjd.

Absolute-Center.is-Responsive ( bredd: 60 %; höjd: 60 %; min bredd: 400 px; maxbredd: 500 px; utfyllnad: 40 px; överflöde: auto; marginal: auto; position: absolut; topp: 0; vänster: 0; botten: 0;

Offsets

Om sajten har en fast rubrik eller om du behöver göra någon annan indrag, behöver du bara lägga till kod så här till stilarna topp: 70px; Just nu inställd marginal: auto; Innehållsblocket kommer att vara korrekt centrerat i höjdled.

Du kan också anpassa innehållet till önskad sida och lämna centrering i höjdled. För att göra detta måste du använda höger: 0; vänster: auto; för högerinställning eller vänster: 0; höger: auto; för vänsterjustering.

Absolute-Center.is-Right ( bredd: 50 %; höjd: 50 %; marginal: auto; overflow: auto; position: absolut; topp: 0; vänster: auto; botten: 0; höger: 20px; text-align: höger;

Mycket innehåll

För att säkerställa att en stor mängd innehåll inte tillåter att layouten flyttas isär använder vi spill: auto. En vertikal rullningslist visas. Du kan också lägga till maxhöjd: 100%; om innehållet inte har ytterligare utfyllnad.
.Absolute-Center.is-Overflow (bredd: 50%; höjd: 300px; maxhöjd: 100%; marginal: auto; spill: auto; position: absolut; topp: 0; vänster: 0; nedre: 0; höger : 0;

Bilder

Denna metod fungerar utmärkt för bilder också! Låt oss lägga till stil höjd: auto; då kommer bilden att skalas tillsammans med behållaren.

Absolute-Center.is-Image ( bredd: 50 %; höjd: auto; marginal: auto; position: absolut; topp: 0; vänster: 0; nedre: 0; höger: 0; )

Variabel höjd

Den beskrivna metoden kräver en given blockhöjd, som kan anges i procent och styras med maximal höjd, vilket gör metoden idealisk för responsiva webbplatser. Ett sätt att inte ange en höjd är att använda display: tabell. I det här fallet centreras innehållsblocket oavsett storlek.

Det kan finnas problem med kompatibilitet över webbläsare, kanske bör du använda tabellcellmetoden (beskrivs nedan).

• Firefox/IE8: användande display: tabell Justerar blocket vertikalt mot dokumentets övre kant.
• IE9/10: användande display: tabell riktar blocket åt vänster övre hörnet sidor.
• Mobile Safari: om bredden anges i procent blir det lidande horisontell centrering

.Absolute-Center.is-Variable (display: tabell; bredd: 50%; spill: auto; marginal: auto; position: absolut; topp: 0; vänster: 0; nedre: 0; höger: 0; )

andra metoder

Den beskrivna metoden fungerar utmärkt i de flesta fall, men det finns andra metoder som kan vara tillämpliga för att lösa specifika problem.

Negativ marginal

Förmodligen det mest populära sättet. Lämplig om blockmåtten är kända.

Är-negativ (bredd: 300px; höjd: 200px; utfyllnad: 20px; position: absolut; topp: 50%; vänster: 50%; marginal-vänster: -170px; /* (bredd + utfyllnad)/2 */ marginal- topp: -120px; /* (höjd + stoppning)/2 */ )
Fördelar:

• Kompatibilitet över webbläsare
• Minsta kod

Brister:

• Inte adaptiv
• Layout kryper om det är för mycket innehåll i behållaren
• Du måste kompensera för indraget eller användningen box-storlek: border-box

Använder transform

En av de mest enkla sätt, stöder höjdförändringar. Det finns en detaljerad artikel om detta ämne - "Centering Percentage Width/Height Elements" från CSS-Tricks.

Är-transformerad (bredd: 50%; marginal: auto; position: absolut; topp: 50%; vänster: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%; transform: translate(-50%,-50%);
Fördelar:

• Variabel höjd
• Minsta kod

Brister:

• Fungerar inte i IE 8
• Använda prefix
• Kan störa andra effekter med omvandla
• I vissa fall är blockkanter och text suddiga under renderingen

Tabell-cell

Kanske ett av de bästa och enklaste sätten. Beskrivs i detalj i artikeln "Flexibel höjd vertikal centrering med CSS, bortom IE7" av 456bereasttreet. Den största nackdelen är den extra uppmärkningen: tre element krävs:

CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; vertical-align: middle; ) .is-Table .Center-Block ( bredd: 50%; marginal: 0 auto;
Fördelar:

• Variabel höjd
• Layout fungerar inte när stora mängder text i block
• Kompatibilitet över webbläsare

Brister:

• Komplex struktur

Flexbox

Framtiden för CSS, flexbox kommer att lösa många av dagens layoutproblem. Detta är skrivet i detalj i en artikel från Smashing Magazine som heter Centering Elements with Flexbox.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: centrera; -ms-flex-align: center; : center; justify-content: center)
Fördelar:

• Innehållet kan vara vilken höjd eller bredd som helst
• Kan användas i mer komplexa fall

Brister:

• Inget stöd för IE 8-9
• Kräver behållare eller stilar i kroppen
• Kräver en mängd olika prefix till korrekt funktion i moderna webbläsare
• Möjliga prestandaproblem

Slutsats

Varje metod har fördelar och nackdelar. I huvudsak handlar valet om att välja vilka webbläsare som ska stödjas

Att använda margin:auto för att centrera ett blockelement horisontellt är en välkänd teknik. Men har du någonsin undrat hur det fungerar?

Effekten av auto beror på elementtypen och sammanhanget. För toppstoppning CSS automatisk kan betyda en av två saker: ta allt fritt utrymme eller 0 pixlar. Beroende på detta kommer en annan struktur att specificeras.

"auto" - upptar allt tillgängligt utrymme

Detta är det vanligaste sättet att använda auto för indrag. Om vi ​​ställer in auto för vänster och höger stoppning av ett element kommer de jämnt att ta upp allt horisontellt utrymme som finns tillgängligt i behållaren. Detta kommer att placera elementet i mitten.

Se exempel

Detta fungerar bara för horisontell stoppning. Men kommer inte att fungera för flytande och inline-element. Och även för absolut och fast placerade element.

Simulera flytbeteende genom att allokera tillgängligt utrymme

auto fördelar allt ledigt utrymme lika mellan höger och vänster marginal. Men vad händer om vi ställer in detta värde för endast en av stoppningarna? Då kommer det att ta upp allt tillgängligt utrymme, och elementet kommer att förskjutas till höger eller vänster kant.

Se exempel

"auto" - ställ in 0 pixlar

Som nämnts ovan fungerar inte auto för flytande, inline eller absolut placerade element. En struktur har redan definierats för dem, så de används marginal auto Det går inte ihop.

Detta kommer bara att störa den ursprungliga strukturen. Inklusive CSS för indrag av text överst. Därför kommer auto att ställa utfyllningen av dessa element till 0 pixlar.

auto kommer inte heller att fungera på ett standardblockelement om det inte har en specificerad bredd. I alla exempel jag gav hade elementen en bredd specificerad.

Värdet auto kommer att definiera en utfyllnad på 0 pixlar när bredden på ett blockelement är inställt på auto eller 100 % . Vanligtvis tar den upp hela bredden av behållaren, så det kommer att finnas 0 pixlar kvar för utfyllnadsbredden.

Vad händer med vertikal stoppning när den är inställd på auto?

auto för både CSS topp- och bottenutfyllnad beräknas alltid som 0 pixlar ( exklusive absolut placerade element). W3C-specifikationen säger följande:

"Om "marginal-top" eller "margin-bottom" är inställda på "auto", är de inställda på 0."

Detta beror på att på en webbsida är alla element oftast fördelade vertikalt. Därför, genom att centrera ett elements höjd i en behållare, kommer vi inte att uppnå det faktum att det kommer att visas vertikalt centrerat i förhållande till själva sidan, som händer med horisontell centrering.

Eller kanske är det av samma anledning som de bestämde sig för att lägga till ett undantag för absolut placerade element som kan centreras vertikalt i förhållande till den totala sidhöjden.

Eller för att effekten av att kombinera indrag (slå samman indrag av intilliggande element). Detta är ytterligare ett undantag av denna regel bestämma vertikala förskjutningar.

Centrering av absolut placerade element

Eftersom det finns ett undantag för absolut placerade element kan du använda auto för att centrera dem vertikalt och horisontellt. Men först måste vi ta reda på när margin:auto kommer att fungera exakt så här för CSS toppstoppning.

En annan W3C-specifikation säger:

"Om alla tre positionerna ("vänster", "bredd" och "höger") är inställda på "auto", ställ först "marginal-vänster" och "marginal-höger" till 0...
» Om "auto" endast anges för "marginal-vänster" och "marginal-höger", lös då ekvationen med ytterligare villkor så att båda stoppningarna har samma bredd."

Situationen beträffande autovärdet för horisontell utfyllnad beskrivs här i detalj. För att säkerställa att dessa stoppningar har samma storlek bör vänster , bredd och höger inte ställas in på auto ( deras standardvärde). För att centrera ett element horisontellt måste du ställa in bredden på det absolut placerade elementet till ett visst värde, och vänster och höger måste ha lika värden.

I specifikationen nämns också något liknande för toppstoppningen av CSS div.

"Om 'top', 'height' och 'bottom' är inställda på 'auto', ställ in 'top' till statisk..."

"Om en av de tre positionerna inte är inställd på 'auto': Om 'top' och 'bottom' är inställda på 'auto', lös ekvationen med ett ytterligare villkor för att ställa in dessa stoppningar till samma värden."

För att vertikalt centrera ett absolut placerat element får topp , höjd och botten därför inte ställas in på auto .

När vi nu lägger ihop allt detta får vi följande:

Se exempel

Slutsats

Om du behöver flytta ett element på en sida till höger eller vänster utan behållarelement ( till exempel, som i fallet med float), kom ihåg att du kan använda auto för indrag.

Konvertera ett element till absolut positionerat endast för att centrera det vertikalt ( toppstoppning CSS), Inte bästa idén. Det finns andra alternativ som flexbox och CSS transform som är bättre lämpade för detta.

Översättning av artikeln " CSS – margin auto – Hur det fungerar"förbereddes av det vänliga projektteamet.

Bra dålig