Horizontale uitlijning in CSS. Horizontale en verticale uitlijning van elementen

18/02/15 21,4K

Als je in een website knipt die op basis van html is gemaakt, dan zie je een bepaalde gelaagde structuur. Bovendien zal het uiterlijk vergelijkbaar zijn met een laagcake. Als je dat denkt, heb je hoogstwaarschijnlijk al een hele tijd niet meer gegeten. Stil dus eerst je honger, en dan zullen we je vertellen hoe je een div-laag op je site kunt centreren:

Voordelen van opmaak met behulp van een tag

Er zijn twee hoofdtypen websitestructuur:

  • Tabelvormig;
  • Blok.

Zelfs aan het begin van het internet was de tabellarische indeling dominant. De voordelen zijn onder meer de nauwkeurigheid van de gespecificeerde positionering. Maar toch heeft het duidelijke tekortkomingen. De belangrijkste zijn de lengte van de code en de lage laadsnelheid.

Wanneer u een tabellarische lay-out gebruikt, wordt de webpagina pas weergegeven nadat deze volledig is geladen. Bij het gebruik van div-blokken worden de elementen onmiddellijk weergegeven.

Naast de hoge laadsnelheid kunt u met de blokconstructie van een website de hoeveelheid html-code meerdere keren verminderen. Onder meer door het gebruik van CSS-klassen.

Er moet echter een tabellarische indeling worden gebruikt om de weergave van gegevens op de pagina te structureren. Een klassiek voorbeeld van het gebruik ervan is de weergave van tabellen.

Blokconstructie op basis van tags wordt ook laag voor laag genoemd, en de blokken zelf worden lagen genoemd. Dit komt omdat wanneer bepaalde eigenschapswaarden worden gebruikt, deze op elkaar kunnen worden gestapeld, vergelijkbaar met lagen in Photoshop.

Positioneringshulpmiddelen

Bij blokopmaak is het beter om lagen te positioneren met behulp van trapsgewijze stijlbladen. De belangrijkste CSS-eigenschap die verantwoordelijk is voor de lay-out is float.
Eigenschapsyntaxis:
zweven: links | juist | geen | erven
Waar:

  • links – lijn het element uit met de linkerrand van het scherm. De stroming rond de overige elementen vindt plaats aan de rechterkant;
  • rechts – uitlijning aan de rechterkant, stroming rond andere elementen – aan de linkerkant;
  • geen – inpakken is niet toegestaan;
  • inherit – erft de waarde van het bovenliggende element.

Laten we eens kijken naar een lichtgewicht voorbeeld van het positioneren van div's met behulp van deze eigenschap:

#left ( breedte: 200px; hoogte: 100px; float: links; achtergrond: rgb(255,51,102); ) #right ( breedte: 200px; hoogte: 100px; float: rechts; achtergrond: rgb(0,255.153); ) Links blok Rechter blok


Nu zullen we proberen dezelfde eigenschap te gebruiken om de derde div in het midden van de pagina te plaatsen. Maar helaas heeft float geen middenwaarde. En wanneer u een nieuw blok een uitlijningswaarde naar rechts of links geeft, wordt het in de opgegeven richting verschoven. Daarom hoeft u alleen nog maar de float in te stellen: overgelaten aan alle drie de blokken:


Maar dit is ook niet de beste optie. Wanneer het venster kleiner wordt gemaakt, worden alle lagen verticaal in één rij uitgelijnd, en wanneer het formaat wordt vergroot, blijven ze aan de linkerrand van het venster plakken. We hebben dus een betere manier nodig om de div te centreren. Centrerende lagen

In het volgende voorbeeld gebruiken we een containerlaag waarin we de overige elementen plaatsen. Dit lost het probleem op van blokken die ten opzichte van elkaar bewegen wanneer de venstergrootte wordt gewijzigd. Het centreren van de container in het midden gebeurt door de marge-eigenschappen op nul te zetten voor de marges vanaf de bovenrand en auto aan de zijkanten (marge: 0 auto):

#container ( breedte: 600px; marge: 0 auto; ) #left ( breedte: 200px; hoogte: 100px; zwevend: links; achtergrond: rgb(255,51,102); ) #right ( breedte: 200px; hoogte: 100px; zwevend : linker achtergrond: rgb(0,255,153); #center ( breedte: 200px; hoogte: 100px; zwevend: links; achtergrond: rgb(255,0,0); ) Linkerblok Middenblok Rechterblok;


Hetzelfde voorbeeld laat zien hoe u een div horizontaal kunt centreren. En als u de bovenstaande code enigszins bewerkt, kunt u de blokken verticaal uitlijnen. Om dit te doen, hoeft u alleen maar de lengte van de containerlaag te wijzigen (verkleinen). Dat wil zeggen, na het bewerken zou de CSS-klasse er als volgt uit moeten zien:

Na de verandering staan ​​alle blokken strikt op een rij in het midden. En hun positie zal niet veranderen, ongeacht de grootte van het browservenster. Zo ziet het verticaal centreren van een div eruit:


In het volgende voorbeeld hebben we een aantal nieuwe CSS-eigenschappen gebruikt om lagen binnen een container te centreren:

#container ( breedte: 450px; hoogte: 150px; marge:0 auto; achtergrondkleur:#66CCFF; ) #left ( breedte: 100px; hoogte: 100px; achtergrond: rgb(255,51,102); weergave: inline-block; verticaal uitlijnen: midden; marge-links: 35px; ) #right ( breedte: 100px; hoogte: 100px; achtergrond: rgb(0,255.153); weergave: inline-blok; verticaal uitlijnen: midden; marge-links: 35px; ) #center ( breedte: 100px; hoogte: 100px; achtergrond: rgb(255,0,0); weergave: inline-block; verticaal uitgelijnd: midden; marge-links: 35px; )


Een korte beschrijving van de CSS-eigenschappen en hun waarden die we in dit voorbeeld hebben gebruikt om een ​​div binnen een div te centreren:
  • weergave: inline-block – lijnt een blokelement uit in een lijn en zorgt ervoor dat het rond een ander element loopt;
  • verticaal uitlijnen: midden – lijnt het element in het midden uit ten opzichte van het bovenliggende element;
  • margin-left – stelt de linkermarge in.
Hoe maak je een link van een laag?

Hoe vreemd het ook klinkt, dit is mogelijk. Soms kan een div-blok als link nodig zijn bij het opmaken van verschillende soorten menu's. Laten we eens kijken naar een praktisch voorbeeld van het implementeren van een linklaag:

#layer1( breedte: 500px; hoogte: 100px; achtergrond: rgb(51.255.204); rand:groef; ) a ( weergave: blok; tekst uitlijnen: midden; hoogte: 100%; kleur: rgb(255,0,51) ; ) Link naar onze website


In dit voorbeeld stellen we met behulp van de regelweergave: blok de link in op de waarde van een blokelement. En zodat de gehele hoogte van het div-blok een link wordt, stelt u de hoogte in op 100%. Blokelementen verbergen en weergeven

Blokelementen bieden meer mogelijkheden om de functionaliteit van de interface uit te breiden dan de verouderde tabellarische lay-out. Het komt vaak voor dat het website-ontwerp uniek en herkenbaar is. Maar voor zo'n exclusief moet je betalen met een gebrek aan vrije ruimte.

Dit geldt met name voor de hoofdpagina, waar de advertentiekosten het hoogst zijn. Daarom ontstaat het probleem waar een andere reclamebanner moet worden 'geschoven'. En hier kun je niet wegkomen door de div uit te lijnen met het midden van de pagina!

Een meer rationele oplossing is om een ​​blok verborgen te maken. Hier is een eenvoudig voorbeeld van een dergelijke implementatie:

#layer1( display:block; breedte: 500px; hoogte: 100px; achtergrond: rgb(51.255.204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

Dit is de magische knop. Als u erop klikt, wordt het verborgen blok verborgen of weergegeven.

Bij het opmaken van een pagina is het vaak nodig om de centrering uit te voeren met behulp van de CSS-methode: bijvoorbeeld het centreren van het hoofdblok. Er zijn verschillende opties om dit probleem op te lossen, die allemaal vroeg of laat door elke lay-outontwerper moeten worden gebruikt.

Tekstuitlijning centreren

Vaak is het voor decoratieve doeleinden nodig om de tekst in het midden uit te lijnen; in dit geval kunt u met CSS de lay-outtijd verkorten. Voorheen gebeurde dit met behulp van HTML-attributen, maar nu vereist de standaard tekstuitlijning met behulp van stylesheets. In tegenstelling tot blokken, waarvoor je de marges moet wijzigen, gebeurt het centreren van tekst in CSS met behulp van een enkele regel:

  • tekst uitlijnen: centreren;

Deze eigenschap wordt geërfd en doorgegeven van de ouder aan alle nakomelingen. Heeft niet alleen invloed op de tekst, maar ook op andere elementen. Om dit te doen, moeten ze inline (bijvoorbeeld span) of inline-block zijn (alle blokken waarvoor de eigenschap display: block is ingesteld). Met deze laatste optie kunt u ook de breedte en hoogte van het element wijzigen en de inspringingen flexibeler aanpassen.

Vaak wordt uitlijning op pagina's toegewezen aan de tag zelf. Dit maakt de code onmiddellijk ongeldig, aangezien het W3C het align-attribuut verouderd heeft verklaard. Het gebruik ervan op een pagina wordt niet aanbevolen.

Een blok uitlijnen op het midden

Als je een div wilt centreren, biedt CSS een behoorlijk handige manier: het gebruik van marges. Inspringingen kunnen worden ingesteld voor zowel blokelementen als inline-blokelementen. De eigenschapswaarde moet 0 (verticale opvulling) en auto (automatische horizontale opvulling) zijn:

  • marge:0 automatisch;

Nu wordt deze optie als absoluut geldig erkend. Door externe opvulling te gebruiken, kunt u ook instellen dat de afbeelding gecentreerd wordt: hiermee kunt u veel problemen oplossen die verband houden met de positionering van een element op de pagina.

Lijn een blok links of rechts uit

Soms is CSS-middenuitlijning niet vereist, maar moet u twee blokken naast elkaar plaatsen: één aan de linkerrand, de andere aan de rechterkant. Voor dit doel is er een float-eigenschap, die een van de volgende drie waarden kan aannemen: links, rechts of geen. Laten we zeggen dat je twee blokken hebt die naast elkaar moeten worden geplaatst. Dan zal de code er zo uitzien:

  • .left (zwevend:links;)
  • .right(zweven:rechts)

Als er nog een derde blok onder de eerste twee blokken moet staan ​​(bijvoorbeeld een voettekst), dan moet dit de eigenschap clear krijgen:

  • .left (zwevend:links;)
  • .right(zweven:rechts)
  • voettekst (duidelijk:beide)

Feit is dat blokken met de klassen links en rechts buiten de algemene stroom vallen, dat wil zeggen dat alle andere elementen het bestaan ​​van uitgelijnde elementen negeren. De clear:both eigenschap zorgt ervoor dat de voettekst of een ander blok elementen kan zien die uit de stroom zijn gevallen en verbiedt zweven zowel links als rechts. Daarom wordt in ons voorbeeld de voettekst naar beneden verplaatst.

Verticale uitlijning

Er zijn momenten waarop het niet voldoende is om de middenuitlijning in te stellen met behulp van CSS-methoden; u moet ook de verticale positie van het onderliggende blok wijzigen. Elk inline- of inline-blokelement kan aan de boven- of onderkant, in het midden van een bovenliggend element of op elke locatie worden genest. Meestal moet het blok op het midden worden uitgelijnd; hiervoor wordt het kenmerk verticale uitlijning gebruikt. Laten we zeggen dat er twee blokken zijn, waarvan de ene in de andere is genest. In dit geval is het binnenste blok een inline-block-element (weergave: inline-block). U moet het onderliggende blok verticaal uitlijnen:

  • uitlijning bovenaan - .child(verticaal uitlijnen:top);
  • uitlijning in het midden - .child(verticaal uitlijnen: midden);
  • uitlijning onderaan - .child(verticaal uitlijnen:onder);

Noch tekstuitlijning, noch verticaal uitlijning heeft invloed op blokelementen.

Mogelijke problemen met uitgelijnde blokken

Soms kan het centreren van een div met behulp van CSS wat problemen veroorzaken. Als u bijvoorbeeld float gebruikt: laten we zeggen dat er drie blokken zijn: .first, .second en .third. Het tweede en derde blok liggen in het eerste. Het element met klasse tweede is links uitgelijnd en het laatste blok is rechts uitgelijnd. Na het afvlakken vielen beiden uit de stroom. Als het ouderelement geen hoogte heeft ingesteld (bijvoorbeeld 30em), zal het niet langer uitrekken tot de hoogte van zijn onderliggende blokken. Om deze fout te voorkomen, gebruikt u een “spacer” - een speciaal blok dat .second en .third ziet. CSS-code:

  • .second(zweven:links)
  • .derde(zweven:rechts)
  • .clearfix(hoogte:0; helder: beide;)

Vaak wordt de pseudo-class:after gebruikt, waarmee je de blokken ook op hun plaats kunt terugzetten door een pseudo-spacer te maken (in het voorbeeld ligt een div met de containerklasse inside.first en bevat.left en.right) :

  • .left(zwevend:links)
  • .right(zweven:rechts)
  • .container:after(inhoud:""; weergave:tabel; helder:beide;)

De bovenstaande opties zijn de meest voorkomende, hoewel er verschillende variaties zijn. Door te experimenteren kun je altijd de eenvoudigste en handigste manier vinden om een ​​pseudo-spacer te maken.

Een ander probleem waar lay-outontwerpers vaak mee te maken krijgen, is de uitlijning van inline-blokelementen. Na elk ervan wordt automatisch een spatie toegevoegd. De marge-eigenschap, die is ingesteld op een negatieve inspringing, helpt hiermee om te gaan. Er zijn andere methoden die veel minder vaak worden gebruikt: bijvoorbeeld nulstelling. In dit geval wordt font-size: 0 geschreven in de eigenschappen van het bovenliggende element. Als er tekst in blokken staat, wordt de vereiste lettergrootte al geretourneerd in de eigenschappen van inline-blokelementen. Bijvoorbeeld lettergrootte:1em. Deze methode is niet altijd handig, daarom wordt de optie met externe inspringingen veel vaker gebruikt.

Door blokken uit te lijnen, kunt u mooie en functionele pagina's maken: dit omvat de lay-out van de algehele lay-out, de rangschikking van producten in online winkels en foto's op een visitekaartjewebsite.

Er zijn verschillende fundamenteel verschillende manieren om een ​​object verticaal te centreren met behulp van CSS, maar het kiezen van de juiste kan lastig zijn. We zullen er een aantal bekijken en met de opgedane kennis ook een kleine website maken.

Verticale middenuitlijning is niet eenvoudig te bereiken met behulp van CSS. Er zijn veel manieren en ze werken niet allemaal in alle browsers. Laten we eens kijken naar 5 verschillende methoden en de voor- en nadelen van elke methode. Voorbeeld.

1e methode

Deze methode gaat ervan uit dat we een element instellen om als tabel weer te geven, waarna we de eigenschap Vertical-align erop kunnen gebruiken (die bij verschillende elementen anders werkt).

Enkele nuttige informatie die gecentreerd moet zijn.

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )
  • Pluspunten
  • Inhoud kan dynamisch van hoogte veranderen (hoogte is niet gedefinieerd in CSS).
Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is.
  • Nadelen
  • Werkt niet in IE 7 of lager
Veel geneste tags

2e methode

Deze methode maakt gebruik van absolute positionering van de div, waarbij de top is ingesteld op 50% en de marge-top minus de helft van de inhoudshoogte. Dit houdt in dat het object een vaste hoogte moet hebben, die is gedefinieerd in de CSS-stijlen.

Omdat de hoogte vaststaat, kunt u overflow:auto; voor een div die inhoud bevat, dus als de inhoud niet past, verschijnen er schuifbalken.

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )
  • Inhoud hier #content ( positie: absoluut; boven: 50%; hoogte: 240px; marge-boven: -120px; /* minus de helft van de hoogte */ )
  • Er is geen onnodig nestelen.
Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is.
  • Als er niet genoeg ruimte is, verdwijnt de inhoud (de div bevindt zich bijvoorbeeld in de body en de gebruiker heeft de vensters kleiner gemaakt, in welk geval de schuifbalken niet verschijnen.
3e methode

Bij deze methode omsluiten we de inhoudsdiv met een andere div. Laten we de hoogte instellen op 50% (hoogte: 50%;), en de ondermarge op de helft van de hoogte (margin-bottom:-contentheight;). De inhoud zal zweven en gecentreerd zijn.

hier is de inhoud #floater( float: left; height: 50%; margin-bottom: -120px; ) #content( clear: beide; hoogte: 240px; positie: relatief; )

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )
  • Inhoud hier #content ( positie: absoluut; boven: 50%; hoogte: 240px; marge-boven: -120px; /* minus de helft van de hoogte */ )
  • Als er niet genoeg ruimte is (bijvoorbeeld als het venster wordt verkleind), wordt de inhoud niet bijgesneden en verschijnen er schuifbalken.
Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is.
  • Ik kan maar één ding bedenken: dat er een extra leeg element wordt gebruikt.
4e methode.

Deze methode gebruikt de eigenschap position:absolute; voor een div met vaste afmetingen (breedte en hoogte). Vervolgens stellen we de coördinaten top:0 in; bodem:0; , maar omdat het een vaste hoogte heeft, kan het niet uitrekken en is het uitgelijnd met het midden. Dit lijkt sterk op de bekende methode om een ​​blokelement met vaste breedte horizontaal te centreren (marge: 0 auto;).

Belangrijke informatie.

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )
  • #content( positie: absoluut; boven: 0; onder: 0; links: 0; rechts: 0; marge: auto; hoogte: 240px; breedte: 70%; )
Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is.
  • Heel eenvoudig.
  • Werkt niet in Internet Explorer
De inhoud wordt zonder schuifbalken afgesneden als er niet voldoende ruimte in de container is.

5e methode

Met deze methode kunt u één regel tekst centreren. We stellen eenvoudigweg de teksthoogte (lijnhoogte) gelijk aan de elementhoogte (hoogte). Hierna wordt de lijn in het midden weergegeven.

#wrapper( weergave: tabel; ) #cell( weergave: tabelcel; verticaal uitlijnen: midden; )
  • Inhoud hier #content ( positie: absoluut; boven: 50%; hoogte: 240px; marge-boven: -120px; /* minus de helft van de hoogte */ )
  • Een regel tekst #content( height: 100px; line-height: 100px; )
Inhoud wordt niet afgesneden als er niet genoeg ruimte voor is.
  • Knipt de tekst niet af als deze niet past.
  • Werkt alleen met tekst (werkt niet met blokelementen).

Als er meer dan één regel tekst is, ziet het er erg slecht uit.

Deze methode is erg handig voor kleine elementen, zoals het centreren van tekst in een knop of tekstveld.

Nu je weet hoe je verticale middenuitlijning kunt bereiken, gaan we een eenvoudige website maken die er uiteindelijk zo uit zal zien:

Stap 1

  • Het is altijd goed om te beginnen met semantische opmaak. Onze pagina zal als volgt opgebouwd zijn:
  • #floater (om de inhoud te centreren)
    • #gecentreerd (centraal element)
      • #kant
      • #logo
      • #nav (lijst
    • #inhoud

    #bottom (voor auteursrechten en zo)

    Laten we de volgende HTML-opmaak schrijven:

    Over

    Ga op een holistische manier om met outsourcing met toegevoegde waarde, na procesgerichte samenwerking en het delen van ideeën.

    Vereenvoudig impactvolle nichemarkten op energieke wijze via ingeschakelde imperatieven. Holistisch overheersen premium innovatie na overtuigende scenario's. Herwaardeer naadloos de hoge normen op het gebied van menselijk kapitaal met toonaangevende vervaardigde producten. Syndiceer schema's die aan standaarden voldoen op onderscheidende wijze vóór robuuste vortals. Herwaardeer op unieke wijze de webgereedheid ten opzichte van kant-en-klare informatie.

    Rubriek 2

    Omarm op efficiënte wijze aangepaste webgereedheid in plaats van klantgerichte processen. Stimuleer op assertieve wijze cross-platform imperatieven ten opzichte van proactieve technologieën. Maak op een handige manier multidisciplinaire metaservices mogelijk zonder bedrijfsbrede interfaces.

    Stroomlijn concurrerende strategische themagebieden op een handige manier met gerichte e-markten. Fosfluorescentie brengt gemeenschappen van wereldklasse samen ten opzichte van markten met toegevoegde waarde. Vind holistische diensten op de juiste manier opnieuw uit vóór robuuste e-diensten.

    Copyrightvermelding vindt u hier

    Stap 2

    Nu gaan we de eenvoudigste CSS schrijven om elementen op de pagina te plaatsen. U moet deze code opslaan in een style.css-bestand. Hiernaar wordt de link in het HTML-bestand geschreven.

    Html, body ( marge: 0; opvulling: 0; hoogte: 100%; ) body ( achtergrond: url("page_bg.jpg") 50% 50% no-repeat #FC3; lettertypefamilie: Georgia, Times, serifs; ) #floater ( positie: relatief; zwevend: links; hoogte: 50%; marge-onder: -200px; breedte: 1px; ) #centered ( positie: relatief; helder: links; hoogte: 400px; breedte: 80%; max -breedte: 800px; minimale breedte: 400px; marge: 0 auto; rand: 4px effen #666 ) #bottom (positie: absoluut; onder: 0; rechts: 0; ) #nav (positie: absoluut; links: 0 ; onder: 0; opvulling: 20px; #content (positie: absoluut; links: 0; boven: 0; onder: 0; overloop: auto; opvulling: 20px;

    Voordat we ons inhoudscentrum uitlijnen, moeten we de hoogte van de body en html instellen op 100%. Omdat de hoogte wordt berekend zonder interne en externe opvulling (opvulling en marge), zetten we deze (opvulling) op 0 zodat er geen schuifbalken zijn.

    #gecentreerde elementbreedte 80%. Dit maakt onze site smaller op kleine schermen en breder op grotere schermen. de meeste sites zien er onfatsoenlijk uit op de nieuwe brede monitoren in de linkerbovenhoek. De eigenschappen min-width en max-width beperken ook onze pagina, zodat deze er niet te breed of te smal uitziet. Internet Explorer ondersteunt deze eigenschappen niet. U moet deze op een vaste breedte instellen.

    Omdat voor het element #centered position:relative is ingesteld, kunnen we de absolute positionering van de elementen erin gebruiken. Stel vervolgens overflow:auto; voor het element #content, zodat er schuifbalken verschijnen als de inhoud niet past.

    Stap 3

    Het laatste dat we doen is wat styling toevoegen om de pagina er wat aantrekkelijker uit te laten zien. Laten we beginnen met het menu.

    #nav ul ( lijststijl: geen; opvulling: 0; marge: 20px 0 0 0; tekstinspringing: 0; ) #nav li ( opvulling: 0; marge: 3px; ) #nav li a (weergave: blok; achtergrondkleur: #e8e8e8; marge: 0; rand-onder: 1px effen: rechts; lettertype-dikte: vet; zwevend: rechts; marge: 0 2px 0 5px; f8f8f8; rand-onder-kleur : #777; ) #nav li a:hover::after ( marge: 0 0 0 7px; kleur: #f93; ) #nav li a:active ( opvulling: 8px 7px 6px 7px; )

    Het eerste dat we deden om het menu er beter uit te laten zien, was de opsommingstekens verwijderen door het list-style:none attribuut in te stellen, en ook de opvulling en opvulling in te stellen, aangezien deze standaard sterk variëren in verschillende browsers.

    Merk op dat we vervolgens hebben gespecificeerd dat de links als blokelementen moeten worden weergegeven. Wanneer ze nu worden weergegeven, worden ze uitgerekt over de gehele breedte van het element waarin ze zich bevinden.

    Een ander interessant ding dat we voor het menu hebben gebruikt, zijn de pseudo-klassen:before en:after. Hiermee kunt u iets voor en na een element toevoegen. Dit is een goede manier om pictogrammen of symbolen toe te voegen, zoals een pijl aan het einde van elke link. Deze truc werkt niet in Internet Explorer 7 en lager.

    Stap 4

    En last but not least voegen we wat schroeven toe aan ons ontwerp voor nog meer schoonheid.

    #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( lettertypefamilie: Helvetica, Arial, sans- serif; lettertype-dikte: normaal; kleur: #666; ) h1 (kleur: #f93; rand-onder: 1px effen #ddd; letter-afstand: -0.05em; lettertype-gewicht: vet; marge-boven: 0; opvulling-top: 0; ) #bottom (opvulling: 10px; lettergrootte: 0.7em; kleur: #f03; ) #logo ( lettergrootte: 2em; tekstuitlijning: midden; kleur: #999; ) #logo strong ( lettertypegewicht: normaal; ) #logo span (weergave: blok; lettertypegrootte: 4em; regelhoogte: 0,7em; kleur: #666; ) p, h2, h3 ( regelhoogte: 1,6em; ) een ( kleur: #f03; )

    In deze stijlen stellen we afgeronde hoeken in voor het #centered element. In CSS3 wordt dit gedaan door de eigenschap border-radius. In sommige browsers is dit nog niet geïmplementeerd, behalve bij het gebruik van de voorvoegsels -moz en -webkit voor Mozilla Firefox en Safari/Webkit.

    Verenigbaarheid

    Zoals je waarschijnlijk al geraden had, is Internet Explorer de belangrijkste bron van compatibiliteitsproblemen:

    • Voor het element #floater moet een breedte zijn ingesteld
    • IE 6 heeft extra opvulling rond menu's

    237152 keer bekeken

    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. We positioneren het blok met de attributen bovenaan en links op 50%, en omdat we vooraf de hoogte en breedte van het blok kennen, stellen we een negatieve marge in, die gelijk is aan de helft van de grootte van het blok. Een groot nadeel van deze optie is dat je negatieve streepjes moet tellen. Bovendien gedraagt ​​het blok 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 het blok stellen we de breedte en hoogte in, plaatsen de attributen rechtsboven linksonder op 0 en stellen we de marge automatisch in. Het voordeel van deze optie is dat er schuifbalken op de ouder werken, als voor deze laatste 100% breedte en hoogte is ingesteld. 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. We stellen tabelstijlen in voor de bovenliggende cel en stellen de tekstuitlijning in op het midden van de bovenliggende cel. En we geven het blok een lijnblokmodel. 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 idee is om het before-pseudo-element op het bovenliggende element te stylen, namelijk 100% hoogte, centrale uitlijning en inline blokmodel. Op dezelfde manier wordt het blok zelf ingesteld op een lijnblokmodel, uitgelijnd op het midden. Om te voorkomen dat het blok onder het pseudo-element “valt” wanneer de grootte van het eerste groter is dan zijn ouder, geven we aan de ouder witruimte aan: nowrap en font-size: 0, waarna we deze stijlen annuleren voor het blok met het volgende - witruimte: normaal. In dit voorbeeld is font-size: 0 nodig om de resulterende ruimte tussen het bovenliggende blok en het blok te verwijderen als gevolg van 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: ""; (weergave: blok; rand: geen; ) )

    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 op de een of andere manier moet 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, waarbij het blok is omkaderd 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 voor het blok instellen, en tegelijkertijd wordt deze laatste adequaat weergegeven, omringd door schuifbalken.
    Voorbeeld: jsfiddle.net/serdidg/nfqg9rza/2.

    U kunt de afbeelding ook in het midden uitlijnen, en als de afbeelding groter is dan de bovenliggende afbeelding, kunt u deze schalen naar de grootte van de bovenliggende afbeelding.
    Voorbeeld: jsfiddle.net/serdidg/nfqg9rza/3.
    Voorbeeld met een grote afbeelding:

    Het horizontaal en verticaal uitlijnen van elementen kan op verschillende manieren. De keuze van de methode hangt af van het type element (blok of inline), het type positionering, de grootte, enz.

    1. Horizontale uitlijning ten opzichte van het midden van het blok/pagina 1.1. Als het blok een breedte heeft: div ( breedte: 300px; marge: 0 auto; /*centreer het element horizontaal binnen het bovenliggende blok*/ )

    Als je een inline-element op deze manier wilt uitlijnen, moet het worden ingesteld op weergave: block;

    1.2. Als een blok binnen een ander blok is genest en geen/gespecificeerde breedte heeft: .wrapper (tekst uitlijnen: centreren;) 1.3. Als de breedte van het blok is ingesteld en u deze in het midden van het bovenliggende blok moet bevestigen: .wrapper (position: relatief; /*stel de relatieve positionering voor het bovenliggende blok in, zodat we het blok er absoluut in kunnen positioneren* /) .box ( breedte: 400px; positie: absoluut ; links: 50%; marge-links: -200px; /*verschuif het blok naar links over een afstand gelijk aan de helft van de breedte*/ ) 1.4. Als voor de blokken geen opgegeven breedte is opgegeven, kunt u ze centreren met behulp van een bovenliggend wrapperblok: .wrapper (text-align: center; /*centreer de inhoud van het blok*/) .box ( display: inline-block; / *schik de blokken horizontaal op een rij*/ margin-right: -0.25em /*verwijder de rechtermarge tussen blokken*/ ) 2. Verticale uitlijning 2.1. Als de tekst bijvoorbeeld één regel beslaat, voor knoppen en menu-items: .button ( height: 50px; line-height: 50px; ) 2.2. Om een ​​blok verticaal uit te lijnen binnen een ouderblok: .wrapper (positie: relatief;) .box ( hoogte: 100px; positie: absoluut; boven: 50%; marge: -50px 0 0 0; ) 2.3. Verticale uitlijning per tabeltype: .wrapper (weergave: tabel; breedte: 100%; ) .box (weergave: tabelcel; hoogte: 100px; tekstuitlijning: midden; verticaal uitlijning: midden; ) 2.4. Als een doos een breedte en hoogte krijgt en gecentreerd moet worden op de bovenliggende doos: .wrapper ( position: relatief; ) .box ( height: 100px; width: 100px; position: absoluut; top: 0; right: 0; onder: 0; links: 0; marge: auto; overloop: auto;*zodat de inhoud zich niet verspreidt*/ ) 2.5. Absolute positionering in het midden van de pagina/blok met behulp van CSS3-transformatie:

    als er afmetingen voor het element zijn opgegeven

    div ( breedte: 300px; /*stel de breedte van het blok in*/ hoogte:100px; /*stel de hoogte van het blok in*/ transformeren: vertalen(-50%, -50%); positie: absoluut; top: 50 %; links: 50% ;

    als het element geen afmetingen heeft en niet leeg is

    Hier wat tekst h1 ( marge: 0; transformeren: vertalen(-50%, -50%); positie: absoluut; boven: 50%; links: 50%; )



GERELATEERDE ARTIKELEN