Centrerad: CSS-layout

När layouten på sidan är ofta nödvändigt att göra en centrerad CSS-sätt, till exempel för att centrera huvudenheten. Det finns flera lösningar på detta problem, som alla kommer förr eller senare måste använda kodare.

Justera text för att centrera

Ofta för dekorativa ändamål som du vill ställa in text centrerad, CSS i det här fallet, för att minska tiden för införandet. Tidigare gjordes detta med hjälp av HTML-attribut, men nu den standard som krävs för att anpassa texten med formatmallen. I motsats till det block som du vill ändra den externa stoppning i CSS anpassning av text i mitten är gjord med en enda rad:

• text-align: center;

Den här egenskapen ärvs och överförs från förälder till alla barn. Det påverkar inte bara text utan även för andra element. För detta ändamål bör de gemener (t ex span) eller rad-blocket (några block som anger display egendom: block). Det senare alternativet kan du också ändra bredden och höjden av elementet, mer flexibel konfiguration av fördjupningen.

sidor rikta ofta attribut till sig taggen. Detta gör omedelbart koden ogiltig, eftersom W3C erkänt align attribut föråldrade. Med hjälp av det på en sida rekommenderas inte.

centrerad blocket

Om du vill ställa anpassningen av div i mitten, kan CSS erbjuda ganska bekvämt sätt: användning av externa padding marginal. Stoppning kan anges som blockelementen, och linje-blocket. Svoysva värdet bör vara 0 (vertikal stoppning), och automatisk (automatisk indrag horisontellt):

• marginal: 0 auto;

Nu detta alternativ är erkänd som helt giltiga. Använda extern utfyllnad också kan du ställa anpassningen av centrum: CSS-marginal egenskap tillåter oss att lösa många problem i samband med positioneringselementet på sidan.

Justering av vänster eller höger kant av blocket

Ibland CSS-vägs inte kräver anpassning av centrum, men det är nödvändigt att sätta de kommande två block, en från vänster sida och den andra - från höger. För detta finns det flyt egendom, vilket kan ta en av tre värden: vänster, höger eller ingen. Låt oss säga att du har två block som ska placeras sida vid sida. Då koden är som följer:

• .left {float: left;}
• .right {float: right}

Om det finns tredjedel blocket, som måste ligga under de första två blocken (t ex sidfot), då är det nödvändigt att registrera tydlig egenskap:

• .left {float: left;}
• .right {float: right}
• sidfot {tydligt: båda}

Det faktum att blocken med klasser av vänster och höger falla ur av det totala flödet, det vill säga alla andra element ignoreras själva existensen av element i linje. Fastighet tydligt: båda tillåter sidfot block eller någon annan synlig fälldes ut från flödescellerna och förbjuder wrap (float) på både vänster och höger. Därför, i vårt exempel, är sidfoten förskjuts nedåt.

vertikal inriktning

Det finns fall där inte tillräckligt för att ställa in inriktningen av mitten av CSS-vägar, måste du även ändra den vertikala positionen för barnets blocket. kan pressas varje linje eller rad-blockelement mot den övre eller undre kanten, som ligger i mitten av det överordnade elementet eller vara i ett godtyckligt läge. Oftast kräver anpassning av mitten av blocket, använder den vertikala-align attribut. Anta att det finns två block, en kapslade i den andra. I detta inomhusenheten - rad-blockelement (display: inline-block). Det är nödvändigt att anpassa den vertikala blocket barn:

• inriktning av den övre gränsen - .child {vertikal-align: topp};
• centrerad - .child {vertikal-align: mitten};
• inriktning av bottenkanten - .child {vertikal-align: bottom};

Vid blockelement audio text-align eller vertikal-align inte gäller.

Möjliga problem med inriktade enheter

Ibland div align mitten av CSS-way kan orsaka lite problem. Till exempel när man använder en flottör, till exempel, det finns tre block: .first, .second och .third. De andra och tredje blocken ligga i det första. Ett element med en klass andra vänsterjusterad, och det sista blocket - till höger. Efter att rikta in två föll från strömmen. Om det överordnade elementet inte är definierad höjd (t.ex. 30em), kommer det att upphöra att sträcka höjden av dotter enheter. För att undvika detta fel, använd "spacer" - en särskild enhet, som ser .second och .third. CSS-kod:

• .second {float: vänster}
• .third {float: right}
• .clearfix {höjd: 0; tydligt: båda;}

pseudo används ofta: efter, vilket också gör det möjligt att återföra blocken på plats genom att skapa psevdorasporki (i exemplet i div med klass ligger inuti behållaren och innefattar en .first .left och .right):

• .left {float: vänster}
• .right {float: right}
• .container: efter {innehåll: ''; display: tabell; tydligt: båda;}

Ovanstående alternativ - den vanligaste, även om det finns vissa variationer. Du kan alltid hitta den enklaste och mest bekväma sättet att skapa psevdorasporki genom experiment.

Ett annat vanligt problem layout - anpassning av linje-blockelement. Efter var och en av dem ett utrymme läggs till automatiskt. Hantera det hjälper fastighets marginal, som definieras av den negativa indrag. Det finns andra sätt, som används mindre ofta, till exempel återställa teckenstorlek. I detta fall, egenskaperna för det överordnade elementet registren font-size: 0. Om ligger inom block av text, har egenskaperna hos linje-blockelement återvände till den önskade teckenstorlek. Till exempel font-size: 1em. Metoden är inte alltid praktiskt, så det är mycket mer vanligt förekommande version med externa marginaler.

Justera Blocks låter dig skapa vackra och funktionella sidor: den allmänna layout och layout, och placeringen av varorna i butikerna, och foton på platsen för en liten.