HTML in het midden van de pagina. Methoden voor verticale middenuitlijning in CSS

Heel vaak is het de taak om een blok in het midden van de pagina/het scherm uit te lijnen, en zelfs zo zonder een Java-script, zonder rigide afmetingen of negatieve inspringingen in te stellen, en zodat de schuifbalken voor de ouder werken als het blok zijn grootte overschrijdt . Er zijn nogal wat eentonige voorbeelden op internet over hoe je een blok op het midden van het scherm kunt uitlijnen. In de regel zijn de meeste van hen gebaseerd op dezelfde principes.

Hieronder staan de belangrijkste manieren om het probleem op te lossen, hun voor- en nadelen. Om de essentie van de voorbeelden te begrijpen, raad ik aan om de hoogte/breedte van het resultaatvenster in de voorbeelden op de gegeven links te verkleinen.

Optie 1: Negatieve inspringing.

Positionering blok gebruik de attributen bovenaan en links met 50%, en ken vooraf de hoogte en breedte van het blok, stel een negatieve marge in, die gelijk is aan de helft van de grootte blok. Een groot nadeel van deze optie is dat je negatieve streepjes moet tellen. Ook blok gedraagt zich niet helemaal correct wanneer het wordt omgeven door schuifbalken - het wordt eenvoudigweg afgesneden omdat het negatieve marges heeft.

Parent ( breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto; ) .block ( breedte: 250px; hoogte: 250px; positie: absoluut; boven: 50%; links : 50%; marge: -125px 0 0 -125px; img (max-breedte: 100%; hoogte: auto; weergave: blok; marge: 0 auto; rand: geen; ) )

Optie 2. Automatische inspringing.

Minder gebruikelijk, maar vergelijkbaar met de eerste. Voor blok we stellen de breedte en hoogte in, plaatsen de attributen rechtsboven linksonder op 0 en stellen de marge automatisch in. Het voordeel van deze optie zijn werkende schuifbalken ouder, als deze laatste 100% breedte en hoogte heeft. Het nadeel van deze methode is de rigide maatvoering.

Parent ( breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto; ) .block ( breedte: 250px; hoogte: 250px; positie: absoluut; boven: 0; rechts: 0; onder: 0; links: 0; marge: auto; img (max. breedte: 100%; hoogte: auto; weergave: blok; marge: 0 auto; rand: geen; )

Optie 3. Tabel.

Laten we het vragen ouder tabelstijlen, cel ouder Stel de tekstuitlijning in op het midden. A blok we stellen het lijnblokmodel in. De nadelen die we ondervinden zijn niet-werkende schuifbalken, en in het algemeen is de esthetiek van de “emulatie” van de tabel dat niet.

Parent ( breedte: 100%; hoogte: 100%; weergave: tabel; positie: absoluut; boven: 0; links: 0; > .inner ( weergave: tabelcel; tekstuitlijning: midden; verticaal uitlijning: midden; ) ) .block (weergave: inline-block; img (weergave: blok; rand: geen; ) )

Om een scroll aan dit voorbeeld toe te voegen, moet je nog een element aan het ontwerp toevoegen.
Voorbeeld: jsfiddle.net/serdidg/fk5nqh52/3.

Optie 4. Pseudo-element.

Deze optie is verstoken van alle problemen die in de voorgaande methoden zijn genoemd en lost ook de oorspronkelijke problemen op. Het punt is dat ouder stijlen instellen pseudo-element voorheen, namelijk 100% hoogte, middenuitlijning en inline blokmodel. Het is hetzelfde met blok er wordt een lijnblokmodel ingesteld, gecentreerd. Naar blok viel er niet onder pseudo-element, wanneer de afmetingen van de eerste groter zijn dan ouder, aanwijzen ouder witruimte: norap en lettergrootte: 0, waarna blok annuleer deze stijlen met het volgende - witruimte: normaal. In dit voorbeeld is font-size: 0 nodig om de resulterende ruimte ertussen te verwijderen ouder En blok vanwege codeopmaak. De ruimte kan op andere manieren worden verwijderd, maar het wordt als het beste beschouwd om deze eenvoudigweg te vermijden.

Parent ( breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto; witruimte: norap; tekst uitlijnen: midden; lettergrootte: 0; &:before ( hoogte: 100%; weergave: inline-blok; verticaal uitlijnen: midden; img (weergave: blok; rand: geen; ) ;

Of, als u wilt dat de ouder alleen de hoogte en breedte van het venster in beslag neemt, en niet de hele pagina:

Parent ( positie: vast; boven: 0; rechts: 0; onder: 0; links: 0; overflow: auto; witruimte: norap; tekst uitlijnen: midden; lettergrootte: 0; &:before ( hoogte: 100%; weergave: inline-blok; verticaal uitlijnen: midden; inhoud: "";

Optie 5. Flexbox.

Een van de eenvoudigste en meest elegante manieren is om flexbox te gebruiken. Het vereist geen onnodige lichaamsbewegingen, beschrijft heel duidelijk de essentie van wat er gebeurt en is zeer flexibel. Het enige dat de moeite waard is om te onthouden bij het kiezen van deze methode is ondersteuning voor IE vanaf versie 10. caniuse.com/#feat=flexbox

Parent ( breedte: 100%; hoogte: 100%; positie: vast; boven: 0; links: 0; weergave: flex; items uitlijnen: midden; inhoud uitlijnen: midden; inhoud uitvullen: midden; overloop: automatisch; ) .block (achtergrond: #60a839; img (weergave: blok; rand: geen; ) )

Optie 6. Transformeren.

Geschikt als we beperkt zijn door de structuur en er geen manier is om het bovenliggende element te manipuleren, maar het blok moet op de een of andere manier worden uitgelijnd. De css-functie translate() komt te hulp. Een waarde van 50% absolute positionering positioneert de linkerbovenhoek van het blok precies in het midden, terwijl een negatieve vertaalwaarde het blok verplaatst ten opzichte van zijn eigen afmetingen. Houd er rekening mee dat er negatieve effecten kunnen optreden in de vorm van vage randen of lettertypestijl. Deze methode kan ook leiden tot problemen bij het berekenen van de positie van het blok met behulp van javascript. Soms kan, om het verlies van 50% van de breedte als gevolg van het gebruik van de CSS left-eigenschap, de voor het blok gespecificeerde regel te compenseren. help: marge-rechts: -50%;

Parent ( breedte: 100%; hoogte: 100%; positie: vast; boven: 0; links: 0; overloop: auto; ) .block ( positie: absoluut; boven: 50%; links: 50%; transformeren: vertalen( -50%, -50%); img (weergave: blok; ) )

Optie 7. Knop.

Gebruikersoptie waar blok ingelijst in een knoptag. De knop heeft de eigenschap om alles wat erin zit te centreren, namelijk de elementen van het inline- en block-line (inline-block) model. In de praktijk raad ik het gebruik ervan af.

Parent ( breedte: 100%; hoogte: 100%; positie: absoluut; boven: 0; links: 0; overloop: auto; achtergrond: geen; rand: geen; omtrek: geen; ) .block ( weergave: inline-block; img (weergave: blok;; rand: geen; ) )

Bonus

Met behulp van het idee van de 4e optie kunt u externe marges instellen blok, en deze laatste wordt adequaat weergegeven, omringd door schuifbalken.
Voorbeeld: jsfiddle.net/serdidg/nfqg9rza/2.

U kunt de afbeelding ook centraal uitlijnen en de afbeelding groter maken ouder, schaal het op maat ouder.
Voorbeeld: jsfiddle.net/serdidg/nfqg9rza/3.
Voorbeeld met een grote afbeelding:

Optie 1: Negatieve inspringing.

Optie 2. Automatische inspringing.

Optie 3. Tabel.

Om een scroll aan dit voorbeeld toe te voegen, moet je nog een element aan het ontwerp toevoegen.
Voorbeeld: jsfiddle.net/serdidg/fk5nqh52/3.

Optie 4. Pseudo-element.

Of, als u wilt dat de ouder alleen de hoogte en breedte van het venster in beslag neemt, en niet de hele pagina:

Optie 5. Flexbox.

Optie 6. Transformeren.

Optie 7. Knop.

Gebruiker azproduction-optie waar blok ingelijst in een knoptag. De knop heeft de eigenschap om alles wat erin zit te centreren, namelijk de elementen van het inline- en block-line (inline-block) model. In de praktijk raad ik het gebruik ervan af.

Bonus

Met behulp van het idee van de 4e optie kunt u externe marges instellen blok, en deze laatste wordt adequaat weergegeven, omringd door schuifbalken.
Voorbeeld: jsfiddle.net/serdidg/nfqg9rza/2.

U kunt de afbeelding ook centraal uitlijnen en de afbeelding groter maken ouder, schaal het op maat ouder.
Voorbeeld: jsfiddle.net/serdidg/nfqg9rza/3.
Voorbeeld met een grote afbeelding:

Vlad Merzjevitsj

Doordat de inhoud van tabelcellen gelijktijdig horizontaal en verticaal uitgelijnd kan worden, worden de mogelijkheden voor het regelen van de positie van elementen ten opzichte van elkaar uitgebreid. Met tabellen kunt u de uitlijning van afbeeldingen, tekst, formuliervelden en andere elementen ten opzichte van elkaar en de webpagina als geheel instellen. Over het algemeen is uitlijning vooral nodig om visuele verbindingen tussen verschillende elementen tot stand te brengen, maar ook om ze te groeperen.

Verticale centrering

Eén manier om de bezoeker de focus en naam van de site te laten zien, is door een splashpagina te gebruiken. Dit is de eerste pagina waarop in de regel een flash-splash-scherm of een afbeelding staat die het hoofdidee van de site weergeeft. De afbeelding is ook een link naar andere delen van de site. U moet deze afbeelding in het midden van het browservenster plaatsen, ongeacht de monitorresolutie. Hiervoor kunt u een tafel gebruiken met een breedte en hoogte van 100% (voorbeeld 1).

Voorbeeld 1: Centreren van de tekening

Uitlijning

In dit voorbeeld wordt de horizontale uitlijning ingesteld met behulp van de tagparameter align="center". en de inhoud van de cel is mogelijk niet verticaal gecentreerd, aangezien dit de standaardpositie is.

Om de tafelhoogte op 100% in te stellen, moet u deze verwijderen, is de code niet meer geldig.

Door de breedte en hoogte te gebruiken om het gehele beschikbare gebied van de webpagina te bestrijken, wordt ervoor gezorgd dat de inhoud van de tabel exact op het midden van het browservenster wordt uitgelijnd, ongeacht de grootte ervan.

Horizontale uitlijning

Door de kenmerken align (horizontale uitlijning) en valign (verticale uitlijning) van de tag te combineren , is het toegestaan om verschillende soorten posities van elementen ten opzichte van elkaar in te stellen. In afb. Figuur 1 toont manieren om elementen horizontaal uit te lijnen.

Laten we enkele voorbeelden bekijken van tekstuitlijning volgens de onderstaande afbeelding.

Uitlijning bovenaan

Om de bovenste uitlijning van de celinhoud voor een tag op te geven u moet het valign-attribuut instellen met de waarde top (voorbeeld 2).

Voorbeeld 2: Valign gebruiken

Uitlijning

Kolom 1

Kolom 2

In dit voorbeeld worden de celkenmerken bestuurd met behulp van tagparameters , maar het is ook handiger om tussen stijlen te wisselen. In het bijzonder wordt de uitlijning in cellen gespecificeerd door de eigenschappen verticaal uitlijnen en tekst uitlijnen (voorbeeld 3).

Voorbeeld 3: Stijlen toepassen voor uitlijning

Uitlijning

Kolom 1

Kolom 2

Om de code in te korten, wordt in dit voorbeeld een groep selectors gebruikt, omdat de eigenschappen voor verticale uitlijning en opvulling tegelijkertijd op twee cellen worden toegepast.

Onderuitlijning gebeurt op dezelfde manier, maar in plaats van de bovenste waarde wordt onderkant gebruikt.

Uitlijning midden

Standaard wordt de celinhoud uitgelijnd op het midden van de verticale lijn. Als de kolommen dus verschillende hoogtes hebben, moet u de uitlijning op de bovenrand instellen. Soms moet u nog steeds de oorspronkelijke uitlijningsmethode behouden, bijvoorbeeld bij het plaatsen van formules, zoals weergegeven in Fig. 2.

In dit geval bevindt de formule zich strikt in het midden van het browservenster en bevindt het nummer zich aan de rechterkant. Om de elementen op deze manier te rangschikken, hebt u een tabel met drie cellen nodig. De buitenste cellen moeten dezelfde afmetingen hebben, in de middelste cel is de uitlijning gecentreerd en in de rechtercel - langs de rechterrand (voorbeeld 4). Dit aantal cellen is nodig om ervoor te zorgen dat de formule in het midden wordt geplaatst.

Voorbeeld 4: Formule-uitlijning

Uitlijning

(18.6)

In dit voorbeeld wordt de eerste cel van de tabel leeg gelaten; deze dient alleen om een inspringing te maken, die overigens ook met behulp van stijlen kan worden ingesteld.

Formulierelementen uitlijnen

Met behulp van tabellen is het handig om de positie van formuliervelden te bepalen, vooral als ze worden afgewisseld met tekst. Een van de ontwerpopties voor het formulier, bedoeld voor het invoeren van een opmerking, wordt getoond in Fig. 3.

Om ervoor te zorgen dat de tekst naast de formuliervelden rechts wordt uitgelijnd en de formulierelementen zelf links worden uitgelijnd, hebt u een tabel met een onzichtbare rand en twee kolommen nodig. De linkerkolom bevat de tekst zelf, en de rechterkolom bevat tekstvelden (voorbeeld 5).

Voorbeeld 5: Formuliervelden uitlijnen

Uitlijning

In dit voorbeeld wordt voor de cellen waarvoor een juiste uitlijning vereist is, het attribuut align="right" toegevoegd. Om ervoor te zorgen dat het commentaarlabel bovenaan tekst met meerdere regels wordt geplaatst, wordt de corresponderende cel ingesteld op bovenaan uitgelijnd met behulp van het valign-attribuut.

Webontwerpers gebruiken DIV's elke dag in hun werk. Zonder enig understatement is dit de meest populaire tag. Open de broncode van een willekeurige website en je zult zien dat de meeste, zo niet tweederde van de objecten erin zijn ingesloten

. Zelfs met de komst van HTML5 en de opkomst van serieuze concurrenten in de vorm van een artikel of header, wordt het nog steeds overal in de markup ingevoegd. Daarom stel ik voor dat u de kwestie van het opmaken en centreren van div-blokken begrijpt.

Wat is DIV

De naam van het element komt van het Engelse woord divisie, wat divisie betekent. Bij het schrijven van markup wordt het gebruikt om elementen in blokken op te delen. DIV's omsluiten groepen inhoud op een webpagina. Bijvoorbeeld afbeeldingen, alinea's met tekst. De tag heeft op geen enkele manier invloed op de weergave van de inhoud en heeft geen enkele semantische lading.

DIV ondersteunt alle globale attributen. Maar voor webdesign heb je er maar twee nodig: class en id. Je zult je alleen in exotische gevallen herinneren aan alle anderen, en dat is geen feit. Het uitlijningskenmerk, dat voorheen werd gebruikt om div's te centreren of links uit te lijnen, is verouderd.

Wanneer DIV's gebruiken?

Stel je voor dat de site een koelkast is en dat de DIV's plastic containers zijn waarin je de inhoud moet sorteren. Je zou fruit niet in dezelfde bak doen als leverworst. U plaatst elk type product afzonderlijk. Webinhoud wordt op een vergelijkbare manier gegenereerd.

Open een website en verdeel deze in betekenisvolle blokken. Koptekst bovenaan, voettekst onderaan, hoofdtekst in het midden. Aan de zijkant bevindt zich meestal een kleinere kolom met advertentie-inhoud of een tagwolk.

Document

Bekijk nu elke sectie in meer detail. Begin met koptekst. De sitekop heeft een apart logo, navigatie, kop op het eerste niveau en soms een slogan. Wijs aan elk semantisch blok een eigen container toe. Hierdoor worden niet alleen de elementen in de stroom gescheiden, maar kunnen ze ook gemakkelijker worden opgemaakt. U zult het veel gemakkelijker vinden om een object in een DIV-tag te centreren door het een klasse of ID te geven.

DIV's centreren met behulp van marges

Bij het weergeven van webelementen houdt de browser rekening met drie eigenschappen: opvulling, marge en rand. Opvulling is de ruimte tussen de inhoud en de rand ervan. Marge - velden die het ene object van het andere scheiden. Rand zijn de lijnen langs de blokken. Ze kunnen aan allemaal tegelijk worden toegewezen of slechts aan één kant:

div(rand: 1px effen #333; rand-links: geen; )

Deze eigenschappen voegen ruimte toe tussen objecten en helpen u ze op de juiste manier uit te lijnen en te plaatsen. Als een blok met een afbeelding bijvoorbeeld 20% van de linkerrand naar het midden moet worden verschoven, wijst u een waarde voor de linkermarge van 20% toe aan het element:

Blok-met-img(marge-links: 20%; )

Elementen kunnen ook worden opgemaakt met behulp van hun breedtewaarden en negatieve opvulling. Er is bijvoorbeeld een blok met de afmetingen 200px bij 200px. Laten we het eerst een absolute positie toekennen en het met 50% naar het midden verplaatsen.

Div( positie: absoluut; links: 50%; )

Om ervoor te zorgen dat de gecentreerde DIV perfect wordt gepositioneerd, geven we deze een negatieve marge naar links gelijk aan 50% van de breedte, dat wil zeggen -100 pixels:

Marge-links: -100px;

In CSS wordt dit "luchtverwijdering" genoemd. Maar het heeft een aanzienlijk nadeel: de noodzaak om constante berekeningen te maken, wat vrij moeilijk is voor elementen met verschillende nestniveaus. Als de waarden voor de opvulling en de randbreedte zijn opgegeven, berekent de browser standaard de afmetingen van de container als de som van de dikte van de randen, de opvulling rechts en links en de inhoud zelf erin, wat kan komt ook als een verrassing.

Dus als u een DIV moet centreren, gebruikt u de eigenschap box-sizing met de waarde border-box. Dit voorkomt dat de browser opvullings- en randwaarden toevoegt aan de totale breedte van het DIV-element. Om een element te verhogen of te verlagen, gebruik ook negatieve waarden. Maar in dit geval kunnen ze worden toegewezen aan het bovenste of onderste veld van de container.

Een DIV-blok centreren met automatische marges

Dit is een gemakkelijke manier om grote blokken te centreren. U wijst eenvoudigweg de breedte van de container en de marge-eigenschap toe aan auto. De browser plaatst een blok in het midden met gelijke marges aan de linker- en rechterkant, en doet al het werk zelf. Als gevolg hiervan loopt u niet het risico in verwarring te raken bij wiskundige berekeningen en bespaart u aanzienlijk tijd.

Gebruik de auto-field-methode bij het ontwikkelen van responsieve apps. Het belangrijkste is om een breedtewaarde aan de container toe te wijzen in em of percentage. De code in het bovenstaande voorbeeld centreert de DIV en op elk apparaat, inclusief mobiele telefoons, zal deze 90% van het scherm in beslag nemen.

Uitlijning via weergave-eigenschap: inline-block

Standaard worden DIV-elementen beschouwd als blokelementen en is hun weergavewaarde blok. Voor deze methode moet u deze eigenschap overschrijven. Alleen geschikt voor DIV's met een oudercontainer:

Elke tekst

Aan een element met de klasse outside-div wordt een eigenschap text-align toegewezen met de waarde center, waardoor de tekst binnenin wordt gecentreerd. Maar voorlopig ziet de browser de geneste DIV als een blokobject. Om de eigenschap text-align te laten werken, moet de inner-div als kleine letters worden behandeld. Dus in de CSS-tabel voor de inner-div-selector schrijf je de volgende code:

Inner-div( weergave: inline-blok; )

U wijzigt de weergave-eigenschap van blok naar inline-blok.

transformatie/vertaalmethode

Met trapsgewijze stijlbladen kunt u webelementen naar wens verplaatsen, schuintrekken, roteren en anderszins transformeren. Hiervoor wordt de eigenschap transform gebruikt. De waarden geven het gewenste transformatietype en de gewenste mate aan. In dit voorbeeld gaan we werken met vertalen:

transformeren: vertalen(50%, 50%);

De vertaalfunctie verplaatst een element van zijn huidige positie naar links/rechts en omhoog/omlaag. Tussen haakjes worden twee waarden doorgegeven:

mate van horizontale beweging;
mate van verticale beweging.

Als een element langs slechts één van de coördinaatassen moet worden verplaatst, geeft u na het woord vertalen de naam van de as aan en tussen haakjes de hoeveelheid vereiste verplaatsing:

Transformeren: vertalenY(-20%);

In sommige handleidingen kun je transformatie vinden met leveranciersvoorvoegsels:

Webkit-transformatie: vertalen(50%, 50%); -ms-transform: vertalen (50%, 50%); transformeren: vertalen(50%, 50%);

Anno 2018 is dit niet meer nodig; de eigenschap wordt door alle browsers ondersteund, inclusief Edge en IE.

Om de gewenste DIV te centreren, is de CSS-vertaalfunctie geschreven met een waarde van 50% voor de verticale en horizontale as. Hierdoor zal de browser het element met de helft van de breedte en hoogte verschuiven ten opzichte van zijn huidige positie. De breedte- en hoogte-eigenschappen moeten worden opgegeven:

Document

Houd er rekening mee dat het element waarop de transformatie-eigenschap wordt toegepast, onafhankelijk van de omliggende objecten beweegt. Aan de ene kant is dit handig, maar soms kan de DIV door verplaatsing een andere container overlappen. Daarom wordt deze methode voor het centreren van webcomponenten als niet-standaard beschouwd en alleen in gevallen van extreme noodzaak gebruikt. Voor animatie worden transformaties volgens alle CSS-canons gebruikt.

Werken met Flexbox-indeling

Flexbox wordt beschouwd als een geavanceerde manier om weblay-outs te ontwerpen. Maar als u het onder de knie heeft, zult u zich realiseren dat het veel eenvoudiger en prettiger is dan standaard opmaakmethoden. De Flexbox-specificatie is een flexibele en ongelooflijk krachtige manier om met elementen om te gaan. De naam van de module is vanuit het Engels vertaald als “flexibele container”. De waarden van breedte, hoogte en rangschikking van elementen worden automatisch aangepast, zonder inspringingen en marges te berekenen.

In eerdere voorbeelden hebben we al met de eigenschap display gewerkt, maar deze hebben we ingesteld op blok- en inline-blokwaarden. Om flex-indelingen te maken, gebruiken we display: flex. Eerst hebben we een flexcontainer nodig:

Om het in trapsgewijze tabellen om te zetten in een flexcontainer, schrijven we:

Flex-container(weergave: flex; )

Alle geneste objecten, maar alleen directe nakomelingen, zullen flexibele elementen zijn:

Eerst

Seconde

Derde

Vierde

Als u een lijst in een flexcontainer plaatst, worden de li-lijstitems niet als flexelementen beschouwd. Flexbox-indeling werkt alleen op ul:

Regels voor het plaatsen van flexelementen

Om flexitems te beheren, heb je uitvul-inhoud en uitlijn-items nodig. Afhankelijk van de waarden die u opgeeft, plaatsen deze twee eigenschappen automatisch objecten als dat nodig is. Als we alle geneste DIV's moeten centreren, schrijven we justify-content: center, align-items: center en niets anders. De browser doet de rest van het werk zelf:

Document

Eerst

Seconde

Derde

Vierde

Om tekst te centreren op DIV's die flexibele items zijn, kunt u de standaardtechniek voor tekstuitlijning gebruiken. Of u kunt van elke geneste DIV ook een flexcontainer maken en de inhoud beheren met justify-content. Deze methode is veel rationeler als deze een verscheidenheid aan inhoud bevat, inclusief afbeeldingen en andere geneste objecten, inclusief lijsten met meerdere niveaus.

De lay-out en uitlijning in het midden van websitepagina's is een creatieve onderneming en veroorzaakt vaak problemen voor beginners. Laten we dus kijken hoe we het moeten doen. Laten we zeggen dat we een pagina willen maken met de volgende structuur:

Onze pagina bestaat uit vier blokken: koptekst, menu, inhoud en voettekst. Om de pagina te centreren, plaatsen we deze vier blokken in één hoofdblok:

Sitekop

Inhoud

Onderaan de site

Met deze structuur als voorbeeld zullen we verschillende opties overwegen.

Lay-out en centrering van een rubbersite

Bij het aanleggen van een rubberlocatie is de belangrijkste meeteenheid -%, omdat de locatie zich over de breedte moet uitstrekken en alle vrije ruimte in beslag moet nemen.

Daarom zal de breedte van de blokken "koptekst" en "voettekst" 100% van de schermbreedte zijn. Laat de breedte van het "menu"-blok 30% zijn, en het "inhoud"-blok moet zich naast het "menu"-blok bevinden, d.w.z. het moet een linkermarge hebben (marge-links) met een breedte gelijk aan de breedte van het "menu"-blok, d.w.z. dertig%.

Om de blokken "menu" en "inhoud" naast elkaar te laten zitten, laten we het blok "menu" zwevend maken en naar de linkerrand duwen. We zullen ook de achtergrondkleuren voor onze blokken instellen. Laten we dit nu allemaal in het stijlblad schrijven (op de style.css-pagina)

#header( achtergrond:#3e4982; breedte:100%; hoogte:110px; tekst uitlijnen:center; kleur:#FFFFFF; lettergrootte:24px; opvulling-top:40px; ) #menu( achtergrond:#6173cb; float :links; breedte:300px; tekst-uitlijnen:center; lettergrootte:18px; #content(achtergrond:#ffffff; marge-links:30%; hoogte:300px; tekst-uitlijnen:center; ) #footer(achtergrond: #3e4982; helder: beide; breedte: 100%; hoogte: 50px; tekst uitlijnen: midden; kleur: #FFFFFF;

De hoogte van de blokken werd voorwaardelijk ingesteld zodat het resultaat zichtbaar was. Bekijk onze pagina in uw browser:

Als u de grootte van het browservenster wijzigt, verandert de breedte van alle blokken. Dit is niet altijd handig, omdat... Wanneer het menublok wordt uitgerekt, verschijnt er lege ruimte. Daarom staat de breedte van het “menu”-blok vaak vast, dus laten we hetzelfde doen. Om dit te doen, vervangt u de waarden van de overeenkomstige eigenschappen in het stijlblad:

... #menu( achtergrond:#6173cb; float:left; breedte:200px; hoogte:300px; ) #content( achtergrond:#ffffff; margin-left:200px; hoogte:300px; ) ...

Nu strekt onze pagina zich natuurlijker uit. Met een vloeiende lay-out beslaan pagina's de gehele breedte van het scherm, zodat pagina-uitlijning niet vereist is.

Maar als u wilt, kunt u ervoor zorgen dat uw pagina links en rechts van het scherm gelijke opvulling heeft. Om dit te doen, moet je een stijl toevoegen aan het "hoofdblok", dat een container is voor alle andere blokken:

Onze pagina ziet er nu zo uit:

Indeling en centrering van de site, vaste breedte

In dit geval zullen we vaste afmetingen voor onze blokken moeten instellen:

#main( breedte:800px; ) #header( achtergrond:#3e4982; breedte:800px; hoogte:150px; tekst uitlijnen:center; kleur:#FFFFFF; lettergrootte:24px; opvulling-top:40px; ) #menu ( achtergrond:#6173cb; float:left; breedte:200px; hoogte:300px; tekst uitlijnen:center; kleur:#FFFFFF; lettergrootte:18px; opvulling-top:10px; ) #content( achtergrond:#ffffff; marge-links:200px; hoogte:300px; tekst-uitlijnen:midden; ) #footer(achtergrond:#3e4982; helder:beide; breedte:800px; hoogte:50px; tekst-uitlijnen:midden; kleur:#FFFFFF; lettertype- grootte:14px; opvulling bovenaan:10px)

Nu wordt onze pagina tegen de linkerrand van het scherm gedrukt.

In dit geval kan de centrale uitlijning van sitepagina's als volgt worden uitgevoerd. Laten we niet vergeten dat onze pagina een "body"-tag heeft, die ook een breedte en wat opvulling kan krijgen.

Laten we dit doen: geef de "body"-tag een breedte van 800 pixels (zoals het "hoofd"-blok) en een opvulling links van 50%. Vervolgens wordt de volledige inhoud van het "hoofdblok" aan de rechterkant van het scherm weergegeven (d.w.z. van het midden naar rechts):

Om ervoor te zorgen dat ons ‘hoofdblok’ zich in het midden van het scherm bevindt, moet het midden ervan samenvallen met het midden van de ‘body’-tag. Die. je moet het "hoofd" blok met de helft van zijn grootte naar links verschuiven. De breedte van het "hoofdblok" is 800 pixels, wat betekent dat u de eigenschap "margin-left:-400px" erop moet instellen. Ja, deze eigenschap kan negatieve waarden aannemen, waarna de linkermarge wordt verkleind (d.w.z. naar links verschoven). En dit is precies wat we nodig hebben.

Het stijlblad ziet er nu als volgt uit:

body( breedte:800px; opvulling-links:50%; ) #main( breedte:800px; marge-links:-400px; ) #header( achtergrond:#3e4982; breedte:800px; hoogte:150px; tekst-align:center ; kleur:#FFFFFF; lettergrootte:24px; opvulling bovenaan:40px; ) #menu(achtergrond:#6173cb; zwevend:links; breedte:200px; hoogte:300px; tekstuitlijning:midden; kleur:#FFFFFF; lettergrootte:18px; opvulling-top:10px; ) #content( achtergrond:#ffffff; marge-links:200px; hoogte:300px; tekst-uitlijning:center; ) #footer(achtergrond:#3e4982; helder:beide; breedte:800px;tekst uitlijnen:center;lettergrootte:14px;

En onze pagina in de browser bevindt zich precies in het midden:

We hebben twee opties bekeken voor het centreren van sitepagina's; deze zijn in feite geen dogma's. U kunt experimenteren en uw eigen versie bedenken, kijk gewoon hoe deze in verschillende browsers werkt. Helaas kan wat goed wordt weergegeven in FireFox of Opera volkomen onbegrijpelijk worden weergegeven in IE en omgekeerd. En dit moeten we onthouden.

Veel succes met je creatieve zoektocht!

Naam
E-mail
Een reactie