Mycket ofta är uppgiften att rikta in blocket till mitten av sidan/skärmen, och även så utan ett java-script, utan att ställa in hårda storlekar eller negativa indrag, så att rullningslistorna fungerar på föräldern om blocket överskrider sin storlek. Det finns en hel del monotona exempel på nätet på hur man riktar ett block mot mitten av skärmen. Som regel är de flesta baserade på samma principer.
Nedan är de viktigaste sätten att lösa problemet, deras för- och nackdelar. För att förstå kärnan i exemplen rekommenderar jag att du minskar höjden / bredden på resultatfönstret i exemplen vid de angivna länkarna.
Alternativ 1. Negativ stoppning.
Positionering blockeraövre och vänstra attribut med 50 %, och känna till blockets höjd och bredd i förväg, ställ in en negativ marginal, som är lika med halva storleken blockera. En stor nackdel med det här alternativet är att du måste räkna negativa indrag. Också blockera beter sig inte helt korrekt i miljön med rullningslister - den är helt enkelt avskuren eftersom den har negativa indrag.
Förälder ( bredd: 100 %; höjd: 100 %; position: absolut; topp: 0; vänster: 0; överflöde: auto; ) .block ( bredd: 250 px; höjd: 250 px; position: absolut; topp: 50 %; vänster : 50 %; marginal: -125px 0 0 -125px; img ( maxbredd: 100 %; höjd: auto; display: block; marginal: 0 auto; kantlinje: ingen; ) )
Alternativ 2: Automatisk indrag.
Mindre vanligt, men liknar den första. För blockera ställ in bredd och höjd, placera de övre högra nedre vänstra attributen till 0 och ställ in marginalen automatisk. Fördelen med detta alternativ är de fungerande rullningslisterna förälder, om den senare har 100 % bredd och höjd. Nackdelen med denna metod är den stela dimensioneringen.
Förälder ( bredd: 100 %; höjd: 100 %; position: absolut; topp: 0; vänster: 0; överflöde: auto; ) .block ( bredd: 250 px; höjd: 250 px; position: absolut; topp: 0; höger: 0; botten: 0; vänster: 0; marginal: auto; img ( max-bredd: 100 %; höjd: auto; display: block; marginal: 0 auto; kant: ingen; ) )
Alternativ 3. Tabell.
Vi frågar förälder tabellstilar, cell förälder Ställ in textjustering till mitten. A block ställ in inline-blockmodellen. Nackdelarna är inte fungerande rullningslister, och i allmänhet inte estetiken i "emuleringen" av bordet.
Förälder ( bredd: 100 %; höjd: 100 %; display: tabell; position: absolut; topp: 0; vänster: 0; > .inner ( display: tabellcell; textjustering: mitten; vertikaljustering: mitten; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )
För att lägga till en rullning i det här exemplet måste du lägga till ytterligare ett element i strukturen.
Exempel: jsfiddle.net/serdidg/fk5nqh52/3 .
Alternativ 4. Pseudo-element.
Det här alternativet saknar alla problem som anges i de tidigare metoderna och löser också de ursprungliga uppgifterna. Poängen är att ha förälder ställa in stilar pseudoelement tidigare, nämligen 100% höjd, center alignment och inline box modell. Samma med blockera sätta modellen av inline blocket, center alignment. Till blockera föll inte under pseudoelement när måtten på den första är större än förälder, specificera förälder white-space: nowrap och font-size: 0 varefter y blockera avbryt dessa stilar med följande - blanksteg: normal. I detta exempel font-size: 0 behövs för att ta bort det resulterande utrymmet mellan förälder Och blockera i samband med kodformatering. Spalten kan tas bort på andra sätt, men det anses bäst att helt enkelt inte tillåta det.
Förälder ( bredd: 100 %; höjd: 100 %; position: absolut; topp: 0; vänster: 0; överflöde: auto; blanksteg: nurap; textjustering: mitten; teckensnittsstorlek: 0; &:före ( höjd: 100 %; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left ; img ( visa: block; kantlinje: ingen; ) )
Eller, om du vill att föräldern bara ska ta upp höjden och bredden på fönstret, inte hela sidan:
Förälder (position: fast; överst: 0; höger: 0; nedre: 0; vänster: 0; överflöde: auto; blanksteg: nowrap; text-align: center; font-size: 0; &:before ( höjd: 100%; display: inline-block; vertical-align: middle; content: ""; ) ) .block ( display: inline-block; white-space: normal; vertical-align: middle; text-align: left; img (visa: block; kant: ingen; ) )
Alternativ 5. Flexbox.
Ett av de enklaste och mest eleganta sätten är att använda flexbox. Den kräver inga onödiga kroppsrörelser, beskriver essensen av det som händer ganska tydligt och har hög flexibilitet. Det enda man ska komma ihåg när man väljer den här metoden- stöd för IE från och med version 10. caniuse.com/#feat=flexbox
Förälder ( bredd: 100 %; höjd: 100 %; position: fast; överst: 0; vänster: 0; display: flex; justera-objekt: mitten; justera-innehåll: mitten; justera-innehåll: mitten; spill: auto; ) .block ( bakgrund: #60a839; img ( display: block; border: none; ) )
Alternativ 6. Transform.
Lämpligt om vi är begränsade av strukturen och det inte finns något sätt att manipulera det överordnade elementet, men blocket måste justeras på något sätt. CSS kommer till undsättning översättningsfunktion() . Ett värde på 50 % absolut position kommer att placera rutans övre vänstra hörn exakt i mitten, sedan kommer ett negativt översättningsvärde att flytta rutan i förhållande till dess egna dimensioner. Observera att negativa effekter kan uppstå i form av suddiga kanter eller teckensnitt. En liknande metod kan också leda till problem med att beräkna blockets position med java-script "a. Ibland, för att kompensera för förlusten av 50% av bredden p.g.a. css-användning den vänstra egenskapen kan hjälpas av regeluppsättningen för blocket: margin-right: -50%; .
Förälder ( bredd: 100 %; höjd: 100 %; position: fast; överst: 0; vänster: 0; överflöde: auto; ) .block ( position: absolut; topp: 50 %; vänster: 50 %; transform: translate( -50 %, -50 %); img ( display: block; ) )
Alternativ 7. Knapp.
Användaralternativ var blockera insvept i en knappetikett. Knappen har förmågan att centrera allt som finns inuti den, nämligen elementen i inline- och block-line (inline-block)-modellen. Jag rekommenderar det inte i praktiken.
Förälder ( bredd: 100 %; höjd: 100 %; position: absolut; topp: 0; vänster: 0; överflöde: auto; bakgrund: ingen; kant: ingen; kontur: ingen; ) .block ( display: inline-block; img ( display: block;; border: none; ) )
Bonus
Med hjälp av idén med det fjärde alternativet kan du ställa in marginaler för blockera, och samtidigt kommer den senare att visas på lämpligt sätt i miljön med rullningslister.Exempel: jsfiddle.net/serdidg/nfqg9rza/2 .
Du kan också rikta in bilden i mitten, och om bilden är större förälder, skala den till storlek förälder.
Exempel: jsfiddle.net/serdidg/nfqg9rza/3 .
Exempel på stor bild:
Textjustering vertikalt i CSS– ett väldigt svårt jobb. Jag har sett tillräckligt många människor kämpa med detta och jag hittar hela tiden "kritiska" buggar när det kommer till riktig responsiv design.
Men frukta inte: om du redan kämpar med vertikal justering av CSS har du kommit till rätt plats.
Låt oss prata om CSS vertikal align-egenskapen
När jag först började arbeta inom området webbutveckling led jag lite av den här egenskapen. Jag tänkte att det skulle fungera som en klassisk fastighet” textjustera". Ah, om det bara vore så enkelt...
CSS vertikal-align-egenskap fungerar bra med tabeller men inte med div eller andra element. När du använder det på en div , justerar det elementet med andra block, men inte dess innehåll. I det här fallet fungerar egenskapen endast med display: inline-block; .
Se exempel
Vi vill centrera innehållet, inte själva div!
Du har två alternativ. Om du bara har div med text kan du använda egenskapen line-height. Det betyder att du behöver veta elementets höjd, men du kan inte ställa in den. På så sätt kommer din text alltid att vara i centrum.
Sanningen i detta tillvägagångssätt CSS vertikal justering det finns en nackdel. Om texten är flerrad, så kommer radhöjden att multipliceras med antalet rader. Troligtvis kommer du i det här fallet att få en fruktansvärt designad sida.
Ta en titt på det här exemplet
Om innehållet du vill centrera är mer än en rad, är det bättre att använda tabell-div. Du kan också använda tabeller, men detta är inte semantiskt korrekt. Om du behöver pauser i responsivt syfte är det bättre att använda div-element.
För att detta ska fungera måste det finnas en överordnad behållare med display: table , och inuti den - rätt mängd kolumner du vill centrera med display: table-cell och vertical-align: middle .
Se exempel
Varför fungerar detta med tabelllayout men inte med div-element? Eftersom raderna i tabellen har samma höjd. När innehållet i en tabellcell inte använder allt tillgängligt höjdutrymme, lägger webbläsaren automatiskt till vertikal utfyllnad för att centrera innehållet.
position egendom
Låt oss börja med grunderna i CSS div vertikal justering:
- position: statisk är standard. Elementet renderas enligt HTML-ordningen;
- position: absolut - används för att bestämma den exakta positionen för ett element. Denna position är alltid associerad med det närmaste relativt placerade överordnade elementet (inte statisk). Om du inte bestämmer den exakta positionen för ett element kommer du att förlora kontrollen över det. Det kommer att återges slumpmässigt och helt ignorera dokumentflödet. Som standard visas elementet i det övre vänstra hörnet;
- position: relativ - används för att placera ett element i förhållande till dess normala (statiska) position. Detta värde bevarar dokumentflödesordningen;
- position: fixed - används för att placera elementet i förhållande till webbläsarfönstret så att det alltid visas i visningsporten.
Obs: vissa egenskaper ( topp och z-index) fungerar bara om elementet är inställt på position (inte statisk).
Låt oss komma till saken!
Vill du genomföra CSS-justering mitt vertikala? Skapa först ett element med relativ position och dimensioner. Till exempel: 100 % i bredd och höjd.
Det andra steget kan vara annorlunda beroende på målwebbläsare, men ett av två alternativ kan användas:
- Gammal fastighet: Behöver veta den exakta storleken på fönstret för att ta bort halva bredden och halva höjden. Se exempel;
- Ny CSS3-egendom: Du kan lägga till en transformeringsegenskap med ett översättningsvärde på 50 % och blocket kommer alltid att vara i mitten. Se exempel.
I grund och botten, om du vill centrera innehåll, använd aldrig topp: 40% eller vänster: 300px . Detta fungerar utmärkt på testskärmar, men det är inte centrerande.
Kom ihåg position: fast ? Du kan göra samma sak med den som med absolut position, men du behöver ingen relativ position för det överordnade elementet - det kommer alltid att placeras relativt webbläsarfönstret.
Har du hört talas om flexbox-specifikationen?
Du kan använda flexbox . Det är mycket bättre än något annat alternativ. textjustering med css-center vertikalt. Med flexbox är det en barnlek att hantera element. Problemet är att vissa webbläsare som IE9 och lägre måste tas bort. Här är ett exempel på hur man vertikalt centrerar ett block:
Se exempel
Med hjälp av flexbox-layout kan du centrera flera lådor.
Om du tillämpar det du har lärt dig från dessa exempel kommer du att kunna bemästra CSS justera blocket vertikalt Så snart som möjligt.
Länkar och mer läsning
Lär dig CSS Markup
FlexBox Froggy
flexbox sandlåda
Översättning av artikeln " CSS Vertical Align för alla (Dummies ingår)” förbereddes av det vänliga projektteamet.
När du lägger ut en sida är det ofta nödvändigt att utföra mittjustering på ett CSS-sätt: centrera till exempel huvudblocket. Det finns flera alternativ för att lösa detta problem, som vart och ett förr eller senare måste användas av vilken layoutdesigner som helst.
Centrera textjustering
Ofta, för dekorativa ändamål, vill du ställa in textjusteringen till mitten, CSS i det här fallet låter dig minska layouttiden. Tidigare gjordes detta med HTML-attribut, men nu kräver standarden att text justeras med hjälp av stilmallar. Till skillnad från block, som behöver ändra marginaler, i CSS är textjustering centrerad med en enda rad:
- text-align:center;
Denna egendom ärvs och överförs från förälder till alla barn. Påverkar inte bara texten, utan även andra element. För att göra detta måste de vara inline (till exempel span) eller inline-block (alla block som har egenskapen display: block). Det senare alternativet låter dig också ändra bredden och höjden på elementet, mer flexibelt justera indragen.
Ofta på sidor tillskrivs align till själva taggen. Detta gör omedelbart koden ogiltig, eftersom W3C har utfasat align-attributet. Att använda det på en sida rekommenderas inte.
Justera ett block mot mitten
Om du behöver ställa in div inriktning centrerad har CSS ganska mycket att erbjuda bekväm väg: använd marginalmarginaler. Indrag kan ställas in både för blockelement och inline-blockelement. Egenskapsvärdet måste ha värdena 0 (vertikala indrag) och auto (automatiska horisontella indrag):
- margin:0 auto;
Nu anses detta alternativ som absolut giltigt. Genom att använda marginaler kan du också ställa in justeringen av bilden till mitten: det låter dig lösa många problem i samband med placeringen av ett element på en sida.
Justera blocket åt vänster eller höger
Ibland krävs inte centrering på CSS-sätt, men du måste sätta två block sida vid sida: en på vänsterkanten, den andra till höger. För att göra detta finns det en flytegenskap, som kan ha ett av tre värden: vänster, höger eller inget. Låt oss säga att du har två block som måste placeras sida vid sida. Då blir koden så här:
- .left (flyta:vänster;)
- .right(float:right)
Om det också finns ett tredje block, som ska placeras under de två första blocken (till exempel en sidfot), måste det ställa in egenskapen clear:
- .left (flyta:vänster;)
- .right(float:right)
- sidfot (tydlig:båda)
Faktum är att block med klasser vänster och höger faller ur det allmänna flödet, det vill säga alla andra element ignorerar själva existensen av justerade element. Egenskapen clear:both gör att sidfoten eller vilket annat block som helst kan se de element som har fallit ur flödet och inaktiverar lindningen (floaten) både till vänster och till höger. Därför, i vårt exempel, kommer sidfoten att flyttas nedåt.
Vertikal inriktning
Det finns fall då det inte räcker med att ställa in mittinriktningen på CSS-sätt, du måste också ändra den vertikala positionen för barnblocket. Alla inline- eller inline-blockelement kan vara i nivå med toppen eller botten, vara i mitten av ett överordnat element eller vara i valfri position. Oftast måste ett block centreras, vilket görs med hjälp av vertikal-align-attributet. Låt oss säga att det finns två block, ett kapslat i det andra. I detta fall är det inre blocket ett inline-blockelement (display: inline-block). Du måste justera det underordnade blocket vertikalt:
- top alignment - .child(vertical-align:top);
- center alignment - .child(vertical-align:middle);
- bottenjustering - .child(vertical-align:bottom);
Element på blocknivå påverkas inte av textjustering eller vertikaljustering.
Möjliga problem med justerade block
Ibland kan centrering av en div på CSS-sättet orsaka små problem. Till exempel, när du använder float: låt oss säga att det finns tre block: .first, .second och .third. Det andra och tredje blocket ligger i det första. Elementet med klass två är vänsterjusterat och det sista blocket är högerjusterat. Efter uppriktningen föll båda ur bäcken. Om det överordnade elementet inte har en höjdinställning (till exempel 30em), kommer det inte längre att sträcka sig till höjden av de underordnade blocken. För att undvika detta fel använder de en "spacer" - ett speciellt block som ser .second och .third. CSS-kod:
- .second(float:vänster)
- .third(float:right)
- .clearfix(höjd:0; rensa: båda;)
Pseudoklassen :after används ofta, vilket också låter dig sätta tillbaka block på plats genom att skapa en pseudodistans (i exemplet ligger div med containerklassen inuti .first och innehåller .left och .right):
- .left(float:vänster)
- .right(float:right)
- .container:after(content:""; display:table; clear:both;)
Ovanstående alternativ är de vanligaste, även om det finns flera varianter. Du kan alltid hitta det enklaste och bekvämaste sättet att skapa en pseudospacer genom att experimentera.
Ett annat problem som layoutdesigners ofta möter är anpassningen av inline-blockelement. Ett mellanslag läggs automatiskt till efter var och en av dem. Marginalegenskapen, som är satt till en negativ marginal, hjälper till att klara detta. Det finns andra sätt som används mycket mindre ofta: till exempel nollställning I det här fallet skrivs font-size:0 i egenskaperna för det överordnade elementet. Om det finns text inuti blocken är den önskade teckenstorleken redan returnerad i egenskaperna för inline-blockelementen. Till exempel font-size:1em. Metoden är inte alltid bekväm, så alternativet med externa indrag används mycket oftare.
Justering av block gör att du kan skapa vackra och funktionella sidor: det här är layouten för den allmänna layouten, platsen för varor i onlinebutiker och foton på en visitkortswebbplats.
God dag, prenumeranter och läsare av denna publikation. Idag vill jag gå in på detaljer och berätta hur man centrerar text i css. I några tidigare artiklar har jag indirekt berört detta ämne, så du har lite kunskap inom detta område.
Men i det här inlägget kommer jag att berätta om alla möjliga sätt att justera objekt, samt förklara hur man drar in och linjer punkter. Så låt oss börja lära oss!
Html och dess avkomma och justera
Denna metod används nästan aldrig, eftersom den ersattes av de kaskadformade stilarksverktygen. Men att veta att en sådan tagg finns kommer inte att skada dig.
När det gäller valideringen denna term beskrivs i detalj i artikeln ""), då fördömer själva html-specifikationen användningen < mitten>, eftersom det för giltighet är nödvändigt att använda en transitiv DOKTYP>.
Den här typenhoppar över förbjudna element.
Låt oss nu gå vidare till attributet justera. Den ställer in den horisontella justeringen av objekt på och passar efter taggdeklarationen. Det kan vanligtvis användas för att justera innehåll till vänster ( vänster), på höger sida ( höger), centrerad ( Centrum) och textbredd ( rättfärdiga).
Nedan kommer jag att ge ett exempel där jag kommer att placera bilden och stycket i mitten.
Detta innehåll kommer att centreras.
Observera att för bilden har attributet vi analyserar något olika värden.
I exemplet jag använde align="mitten". Tack vare detta justeras bilden så att meningen hamnar exakt i mitten av bilden.
CSS-centreringsverktyg
CSS-egenskaper designade för att anpassa block, text och grafiskt innehåll används mycket oftare. Detta beror främst på bekvämligheten och flexibiliteten i att implementera stilar.
Så låt oss börja med den första egenskapen för textcentrering - det här är text-justera.
Den fungerar på samma sätt som align in . Bland nyckelorden kan du välja ett från den allmänna listan eller ärva förfaderns egenskaper ( ärva).
Jag vill notera att i css3 kan du ställa in ytterligare 2 parametrar: Start– beroende på reglerna för att skriva texten (från höger till vänster eller vice versa), ställer in justeringen till vänster eller höger (liknande arbetet med vänster eller höger) och slutet- mitt emot start (när man skriver text från vänster till höger fungerar den som höger, när man skriver från höger till vänster - vänster).
Erbjudande till höger
Mening med slut
Låt mig berätta om ett litet trick. När du väljer ett värde rättfärdiga sista raden kan hänga fult underifrån. För att placera den till exempel i centrum kan du använda fastigheten text-justera-sist.
Använd egenskapen för att justera webbplatsinnehåll eller tabellceller vertikalt vertikaljustera. Nedan har jag beskrivit det huvudsakliga nyckelord element.
| Nyckelord | syfte |
| baslinje | Anger anpassningen till förfaderlinjen, som kallas baslinjen. Om förfaderobjektet inte har en sådan linje, sker justering längs bottenkanten. |
| mitten | Mitten av det föränderliga objektet är justerat mot baslinjen, till vilken det överordnade elementets höjdgolv läggs till. |
| botten | Botten av det valda innehållet justeras till botten av objektet under det hela. |
| topp | Liknande botten, bara med toppen av objektet. |
| super | Gör ett tecken upphöjt. |
| sub | Gör elementet sänkt. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C I E THANDLA OMTILL
|
Indrag
Och slutligen har vi nått indraget i stycket. CSS-språket använder en speciell egenskap som kallas textindrag.
Med den kan du göra både en röd linje och en avsats (du måste ange ett negativt värde).
För att skapa en röd linje behöver du bara känna till en parameter.
Det är en enkel text-indent-egenskap.
Jag berömmer dem som prövat varje exempel i praktiken. Skicka länkar till min blogg till dina vänner och glöm inte att prenumerera. Lycka till! Hejdå!
Med vänlig hälsning, Roman Chueshov
Läsa: 675 gånger
Layout och anpassning till mitten av sidorna på webbplatsen är en kreativ fråga och orsakar ofta svårigheter för nybörjare. Så låt oss se hur man gör det. Anta att vi vill göra en sida med följande struktur:
Vår sida består av fyra block: sidhuvud (huvud), meny (meny), innehåll (innehåll) och botten av sajten (sidfot). För att centrera sidan lägger vi dessa fyra rutor i en huvudruta:
Sidhuvud
Innehåll
Sidan längst ner
På exemplet med denna struktur kommer vi att överväga flera alternativ.
Layout och centrering av gummiplatsen
När man lägger ut en gummiplats är den huvudsakliga måttenheten som används -%, eftersom platsen måste sträcka sig i bredd och uppta allt ledigt utrymme.
Därför kommer bredden på "sidhuvud" och "sidfot"-blocken att vara 100 % av skärmens bredd. Låt "meny"-blockets bredd vara 30%, och låt "innehålls"-blocket placeras bredvid "meny"-blocket, d.v.s. den ska ha en vänstermarginal (marginal-vänster) lika med bredden på "meny"-blocket, dvs. trettio%.
För att blocken "meny" och "innehåll" ska placeras sida vid sida, låt oss göra "meny"-blocket flytande och trycka det till vänster kant. Vi kommer också att ställa in bakgrundsfärgerna för våra block. Låt oss nu skriva allt detta i en stilmall (på sidan style.css)
#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( bakgrund:#6173cb; float :left; width:30%; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:30% ; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:100%; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px;)
Höjden på blocken ställdes in villkorligt så att resultatet blev synligt. Titta på vår sida i en webbläsare:
Om du ändrar storlek på webbläsarfönstret kommer bredden på alla block att ändras. Detta är inte alltid bekvämt, eftersom. när du sträcker ut menyblocket visas ett tomt utrymme. Därför görs oftare bredden på "meny" -blocket fast, låt oss göra det på det sättet. För att göra detta, ersätt värdena för motsvarande egenskaper i stilmallen:
... #menu( bakgrund:#6173cb; float:vänster; bredd:200px; höjd:300px; ) #content( bakgrund:#ffffff; margin-left:200px; höjd:300px; ) ...
Nu sträcker sig vår sida mer naturligt. Med flytande layout tar sidorna upp hela skärmens bredd, så sidcentrering krävs inte.
Men om du vill kan du se till att din sida har lika indrag till vänster och höger på skärmen. För att göra detta måste du lägga till en stil till "huvudblocket", som är en behållare för alla andra block:
Nu ser vår sida ut så här:
Platslayout och centrering, fast bredd
I det här fallet måste vi ställa in de fasta storlekarna på våra block:
#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font- storlek:14px; padding-top:10px;)
Nu är vår sida fäst till vänster på skärmen.
I det här fallet kan justering till mitten av webbplatssidorna göras enligt följande. Kom ihåg att vår sida har en "body"-tagg, som även kan ges en bredd och viss utfyllnad.
Låt oss göra så här: ställ in bredden på "body"-taggen till 800 pixlar (som "huvud"-blocket) och vänster indrag (utfyllnad-vänster) till 50%. Då kommer hela innehållet i "huvudblocket" att visas på höger sida av skärmen (dvs från mitten till höger):
För att vårt "huvudblock" ska placeras i mitten av skärmen måste dess mitt matcha mitten av "body"-taggen. De där. flytta "huvudblocket" åt vänster med hälften av dess storlek. Bredden på "huvud"-blocket är 800 pixlar, så du måste ställa in egenskapen "margin-left:-400px" till det. Ja, den här egenskapen kan ha negativa värden, i vilket fall den vänstra marginalen reduceras (dvs. flyttas till vänster). Och det är precis vad vi behöver.
Nu ser stilarket ut så här:
body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font-size:14px; padding-top:10px; )
Och vår sida i webbläsaren ligger exakt i mitten:
Vi övervägde två alternativ för att centrera sidorna på webbplatsen, i själva verket är de inte en dogm. Du kan experimentera och komma på din egen version, kolla bara dess arbete i olika webbläsare. Tyvärr kan det som visas bra i FireFox eller Opera vara helt obegripligt i IE och vice versa. Och detta måste komma ihåg.
Lycka till i dina kreativa sysselsättningar!
