plats på sidan är ofta nödvändigt att göra centrum inriktnings CSS-sätt, till exempel för att centrera huvudenheten.Det finns flera lösningar till detta problem, som alla kommer förr eller senare måste använda någon kodare.
Justera text centrerad
ofta för dekorativa ändamål som du vill ställa in textjusteringen från centrum, CSS i det här fallet, minskar tiden för införandet.Tidigare var detta görs med hjälp av HTML-attribut, nu standarden kräver anpassa text med formatmallar.I motsats till det block som du vill ändra de yttre marginalerna, med CSS textjustering i mitten görs med en enda rad:
- text-align: center;
här egenskapen ärvs och överförs från förälder till alla barn.Det påverkar inte bara text utan även till andra faktorer.För att göra detta måste de vara i gemener (till exempel span) eller line-blocket (alla block som sätter fastigheten display: block).Det senare alternativet kan du också ändra bredden och höjden på en mer flexibel utformning av fördjupningen.
Ofta sidorna anpassa attribut till taggen själv.Detta gör omedelbart koden ogiltig som W3C bekräftade align attribut föråldrad.Dess användning rekommenderas inte på sidan.
inpassningsblock i mitten
Om du vill ange inriktningen av mitten av div kan CSS erbjuda ett ganska enkelt sätt: användning av externa indrag marginal.Stoppning kan ställas in som en blockelement och line-blocket.Svoysva värde bör sättas till 0 (indragen vertikalt) och automatisk (automatisk horisontella strecksatsen):
- Marginal: 0 auto;
nu det här alternativet är erkänd som absolut giltiga.Använda extern stoppning också kan du ange inriktningen av centrum: CSS-marginal fastighet tillåter oss att lösa många problem i samband med positioneringselementet på sidan.
Rikta blocket till vänster eller höger kant
Ibland centruminriktnings CSS-vägs inte behövs, men det är nödvändigt att sätta två enheter bredvid en från vänster sida och den andra - från höger.För detta fastigheten finns en flottör, som kan ta en av tre värden: vänster, höger, eller ingen.Låt oss säga att du har två enheter som måste sättas ihop.Då koden kommer att vara:
- .left {float: left;}
- .right {float: right}
Om det finns en tredje enhet, som ska placeras under de två första block (t.ex. sidfoten), hanmåste du registrera fastigheten tydlig:
- .left {float: left;}
- .right {float: right}
- footer {tydliga: både}
att blocken med klasser vänster och höger fall av totaltflöde, det vill säga alla andra element ignoreras själva förekomsten av element linje.Fastigheten tydliga: både gör sidfoten eller någon annan enhet för att se sjunkit från flödeselementen och förbjuder wrap (float) på både vänster och höger.Därför, i vårt exempel kommer sidfoten nedväxling.
Vertikal justering
Det finns fall där otillräckliga set centruminriktnings CSS-vägar, måste du ändå ändra vertikal position av barnet blocket.Kan pressas alla linjer eller linjeblockelement mot den övre eller nedre kanten, som ligger i mitten av det överordnade elementet, eller vara på något ställe.Oftare kräver anpassning av lådan i centrum är detta attribut används vertikal-align.Anta att det finns två enheter, en inuti en annan.Den interna enheten - linjeblockelement (display: inline-block).Det är nödvändigt att anpassa enheten vertikalt barnet:
- anpassning till den övre gränsen - .child {vertikal-align: top};
- centrering - .child {vertikal-align: mitt};
- inriktning vid den nedre änden - .child {vertikal-align: bottom};
på blockelement eller text-align, eller vertikal-align inte tillämpas.
Eventuella problem med inriktade enheter
Ibland div align mitten av CSS-vägen kan orsaka mindre problem.Till exempel använder float: till exempel, det finns tre block: .first, .second och .third.Den andra och tredje block som finns i den första.Ett element med en klass av andra vänsterjusterad och det sista blocket - till höger.Efter inriktning av två föll ur strömmen.Om föräldern inte är definierad höjd (t.ex. 30em), kommer det inte längre sträcka höjden på dotterheter.För att undvika detta fel, använd "spacer" - en särskild enhet, som ser .second och .third.CSS-kod:
- .second {float: left}
- .third {float: right}
- .clearfix {höjd: 0;clear: both;}
används ofta pseudo: efter, vilket också gör att du kan återgå till blocken på plats genom att skapa psevdorasporki (i detta exempel i en div med en klass av container ligger inom .first och innehåller .left och .right):
- .vänster {float: left}
- .right {float: right}
- .container: efter {content: '';display: table;clear: both;}
över alternativ - det vanligaste, även om det finns vissa variationer.Du kan alltid hitta den enklaste och mest bekväma sättet att skapa psevdorasporki genom experiment.
annat vanligt problem layout - anpassning av linjeblockelement.Efter var och en av dem automatiskt extra utrymme.För att klara denna egenskap hjälp marginalen, som definieras av den negativa indrag.Det finns andra metoder som används mindre ofta, till exempel, återställning teckenstorlek.I det här fallet, egenskaperna hos moderskriven font-size: 0.Om ligger inom textblock, har egenskaperna hos linjeblockelement tillbaka till önskad storlek.Till exempel, font-size: 1em.Metoden är inte alltid bekvämt, alternativet med externa marginaler används så mycket oftare.
inriktningsblocket låter dig skapa vackra och funktionella layout och det är den allmänna layout och placering av varor i butiker, och foton på en liten hemsida.
