Elke lay-outontwerper wordt voortdurend geconfronteerd met de noodzaak om inhoud in een blok uit te lijnen: horizontaal of verticaal. Er zijn verschillende goede artikelen over dit onderwerp, maar ze bieden allemaal veel interessante, maar weinig praktische opties, en daarom moet je geld uitgeven extra tijd om het belangrijkste te benadrukken. Ik besloot deze informatie te presenteren in een vorm die voor mij handig is, om niet meer te googlen.

Blokken met bekende afmetingen uitlijnen

Het is het gemakkelijkst met met behulp van CSS lijn blokken uit waarvan de hoogte (voor verticale uitlijning) of breedte (voor horizontale uitlijning).

Uitlijning met behulp van opvulling

Soms kun je een element niet centreren, maar er randen aan toevoegen met behulp van de eigenschap "padding".

Er is bijvoorbeeld een afbeelding van 200 bij 200 pixels, en je moet deze centreren in een blok van 240 bij 300. We kunnen de hoogte en breedte van het buitenste blok = 200px instellen en 20 pixels aan de boven- en onderkant toevoegen en 50 links en rechts.

.example-wrapper1 ( achtergrond : #535E73 ; breedte : 200px ; hoogte : 200px ; opvulling : 20px 50px ; ) Absoluut gepositioneerde blokken uitlijnen

Als een blok is ingesteld op "positie: absoluut", dan kan het ten opzichte van zijn dichtstbijzijnde ouder worden gepositioneerd met "positie: relatief". Om dit te doen, moet u dezelfde waarde toekennen aan alle eigenschappen (“top”, “right”,,”bottom”,”left”) van het binnenste blok, evenals aan “margin: auto”.

*Er is een nuance: de breedte (hoogte) van het binnenblok + de waarde van links (rechts, onder, boven) mag de afmetingen van het bovenliggende blok niet overschrijden. Betrouwbaarder eigendommen over(rechts, onder, boven) wijs 0 (nul) toe.

.example-wrapper2 ( positie : relatief ; hoogte : 250px ; achtergrond : url(spatie.jpg) ; ) .cat-king ( breedte : 200px ; hoogte : 200px ; positie : absoluut ; boven : 0 ; links : 0 ; onder : 0 ; rechts: 0; marge: auto; achtergrond: url(king.png) ) Horizontale uitlijning Uitlijning met "text-align: center"

Om tekst in een blok uit te lijnen, is er een speciale eigenschap "text-align". Wanneer ingesteld op "gecentreerd", wordt elke tekstregel horizontaal uitgelijnd. Voor tekst met meerdere regels Deze oplossing wordt uiterst zelden gebruikt; vaker wordt deze optie gevonden voor het uitlijnen van overspanningen, links of afbeeldingen.

Ik moest ooit wat tekst verzinnen om te laten zien hoe tekstuitlijning werkt met behulp van CSS, maar er kwam niets interessants in me op. In eerste instantie besloot ik ergens een kinderrijmpje te kopiëren, maar ik herinnerde me dat dit de uniciteit van het artikel zou kunnen aantasten, en dat onze lieve lezers het niet op Google zouden kunnen vinden. En toen besloot ik deze paragraaf te schrijven - het punt ligt er tenslotte niet mee, maar het punt ligt in lijn.

.voorbeeldtekst (tekst uitlijnen: centreren; opvulling: 10px; achtergrond: #FF90B8; )

Het is vermeldenswaard dat deze eigenschap niet alleen voor tekst werkt, maar ook voor iedereen inline-elementen("weergave: inline").

Maar deze tekst is links uitgelijnd, maar staat in een blok dat gecentreerd is ten opzichte van de wrapper.

.example-wrapper3 (tekst uitlijnen: centreren; achtergrond: #FF90B8; ) .inline-tekst (weergave: inline-blok; breedte: 40%; opvulling: 10px; tekst uitlijnen: links; achtergrond: #FFE5E5;) Uitlijning blokken bij marge helpen

Blokelementen met een bekende breedte kunnen eenvoudig horizontaal worden uitgelijnd door ze in te stellen op "margin-left: auto; margin-right: auto". Meestal wordt de verkorte notatie gebruikt: "marge: 0 auto" (elke waarde kan worden gebruikt in plaats van nul). Maar deze methode is niet geschikt voor verticale uitlijning.

.lama-wrapper ( hoogte : 200px ; achtergrond : #F1BF88 ; ) .lama1 ( hoogte : 200px ; breedte : 200px ; achtergrond : url(lama.jpg) ; marge : 0 auto ; )

Zo moet je alle blokken uitlijnen, waar mogelijk (waar een vaste of absolute positionering) - hij is het meest logisch en adequaat. Hoewel dit voor de hand liggend lijkt, heb ik soms enge voorbeelden met negatieve streepjes gezien, dus besloot ik het te verduidelijken.

Verticale uitlijning

Met verticale uitlijning veel meer problemen- blijkbaar was dit niet voorzien in de CSS. Er zijn verschillende manieren om het gewenste resultaat te bereiken, maar ze zijn niet allemaal erg mooi.

Uitlijning met lijnhoogte-eigenschap

In het geval dat er slechts één lijn in een blok zit, kunt u de verticale uitlijning ervan bereiken door de eigenschap "line-height" toe te passen en deze op de gewenste hoogte in te stellen. Voor de zekerheid moet u ook “height” instellen, waarvan de waarde gelijk zal zijn aan de waarde van “line-height”, omdat dit laatste niet in alle browsers wordt ondersteund.

.voorbeeld-wrapper4 (regelhoogte: 100px; kleur: #DC09C0; achtergrond: #E5DAE1; hoogte: 100px; tekstuitlijning: gecentreerd; )

Het is ook mogelijk om blokuitlijning met meerdere lijnen te realiseren. Om dit te doen, moet u een extra wikkelblok gebruiken en de lijnhoogte daarop instellen. Een intern blok kan uit meerdere regels bestaan, maar moet "inline" zijn. U moet er "verticaal uitlijnen: midden" op toepassen.

.example-wrapper5 ( regelhoogte: 160px; hoogte: 160px; lettergrootte: 0; achtergrond: #FF9B00; ) .example-wrapper5 .text1 (weergave: inline-block; lettergrootte: 14px; regelhoogte: 1.5; verticaal uitlijnen: middelste achtergrond: #FFFAF2; kleur: #FF9B00;

Voor het wrapperblok moet "font-size: 0" zijn ingesteld. Indien niet geïnstalleerd nul grootte lettertype, dan zal de browser er meerdere toevoegen extra pixels. U zult ook de lettergrootte en regelhoogte voor het binnenste blok moeten opgeven, omdat deze eigenschappen worden overgenomen van het bovenliggende blok.

Verticale uitlijning in tabellen

De eigenschap "vertical-align" heeft ook invloed op tabelcellen. C ingestelde waarde"midden", de inhoud in de cel wordt uitgelijnd op het midden. Natuurlijk wordt de tabelindeling tegenwoordig als archaïsch beschouwd, maar in uitzonderlijke gevallen kun je deze simuleren door "weergave: tabelcel" op te geven.

Ik gebruik deze optie meestal voor verticale uitlijning. Hieronder ziet u een voorbeeld van de lay-out van een voltooid project. Het is het beeld dat op deze manier verticaal gecentreerd is, dat interessant is.

.one_product .img_wrapper (weergave: tabelcel; hoogte: 169px; verticaal uitlijnen: midden; overloop: verborgen; achtergrond: #fff; breedte: 255px; ) .one_product img (max-height: 169px; max-width: 100 % minimale breedte: 140px; weergave: blokmarge: 0 automatisch;

Houd er rekening mee dat als een element een andere “float”-set dan “none” heeft, het in ieder geval een blok zal zijn (weergave: blok) - dan zul je een extra blokwrapper moeten gebruiken.

Uitlijning met een extra inline-element

En voor inline-elementen kunt u "vertical-align: middle" gebruiken. Hierdoor worden alle elementen met "display: inline" uitgelijnd die zich op dezelfde lijn bevinden ten opzichte van een gemeenschappelijke middellijn.

U moet een hulpblok met een hoogte maken gelijke hoogte ouderblok, dan wordt het gewenste blok gecentreerd. Om dit te doen is het handig om de pseudo-elementen:before of:after te gebruiken.

.example-wrapper6 ( hoogte: 300px; tekstuitlijning: midden; achtergrond: #70DAF1; ) .pudge (weergave: inline-blok; verticaal uitgelijnd: midden; achtergrond: url(pudge.png); achtergrondkleur: # fff ; breedte: 200px ; hoogte: 200px ; riki (weergave: inline-block; hoogte: 100%; verticaal uitlijnen: midden; ) Weergave: flex en uitlijning

Als u niet veel om Explorer 8-gebruikers geeft, of zo veel om hen geeft dat u bereid bent een stukje extra javascript voor hen in te voegen, dan kunt u "display: flex" gebruiken. Flexboxen zijn geweldig in het omgaan met uitlijningsproblemen en schrijven gewoon "marge: auto" om de inhoud erin te centreren.

Tot nu toe ben ik deze methode praktisch nog nooit tegengekomen, maar er zijn geen speciale beperkingen voor.

.example-wrapper7 (weergave: flex; hoogte: 300px; achtergrond: #AEB96A; ) .example-wrapper7 img (marge: auto;)

Nou, dat is alles wat ik wilde schrijven over CSS-uitlijning. Nu zal het centreren van inhoud geen probleem zijn!

Vlad Merzjevitsj

Doordat de inhoud van tabelcellen tegelijkertijd 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 communicatie tussen elkaar tot stand te brengen verschillende elementen, evenals hun groeperingen.

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 TABEL ( breedte: 100%; /* Tafelbreedte */ hoogte: 100%; /* Tafelhoogte */ )

IN in dit voorbeeld horizontale uitlijning wordt 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 verwijderen. De code is dan niet langer 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 precies in 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

Kolom 1

Kolom 2

Uitlijning TABEL ( breedte: 100%; /* Tabelbreedte */ ) #col1 ( breedte: 75%; /* Eerste kolombreedte */ achtergrond: #f0f0f0; /* Eerste kolom achtergrondkleur */ ) #col2 ( breedte: 25 %; /* Breedte van de tweede kolom */ achtergrond: #fc5; /* Achtergrondkleur van de tweede kolom */ tekst uitlijnen: rechts;* Rechts uitlijnen */ ) #col1, #col2 ( verticaal uitlijnen: bovenaan ; / * Uitlijning bovenaan */ opvulling: 5px /* Marges rond celinhoud */ )

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 je nog weg

originele methode

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 de tekst bij de formuliervelden rechts uit te lijnen en de formulierelementen zelf links uit te lijnen, heeft u een tabel nodig met onzichtbare grens en twee kolommen. De linkerkolom bevat de tekst zelf, en de rechterkolom bevat tekstvelden (voorbeeld 5).

Voorbeeld 5: Formuliervelden uitlijnen

Uitlijning

Naam
E-mail
Opmerking

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. De CSS-eigenschap verticaal uitlijnen is verantwoordelijk voor de verticale uitlijning van tekst en afbeeldingen op de pagina. Belangrijk kenmerk is dat het alleen werkt met tabelelementen, inline en inline-blokelementen

. Ondersteund door alle moderne browsers. CSS-syntaxis

verticaal uitlijnen

• ... verticaal uitlijnen: waarde; ...
• basislijn - uitlijning met de basislijn van de voorouder (of eenvoudigweg de ondergrens van de ouder)
• onderkant - lijn uit met de onderkant van de regel (of het element dat zich onder alles bevindt) midden - lijn het middelpunt van het element uit met de basislijn van het bovenliggende element plus de helft van de hoogte
• ouderelement
• sub - weergave vindt plaats onder de regel (ziet eruit als een subscript)
• super - weergave vindt plaats boven de lijn (als superscript) tekst-onder - uitlijning ondergrens
• element onderaan de regel
• text-top - lijn de bovenrand van het element uit met de bovenrand van de lijn
• boven - lijn de bovenrand van het element uit met de bovenkant van het hoogste element op de lijn
• erven - erft de waarde van de ouder waarde - aangegeven in pixels. Positief getal
• verschuift naar boven ten opzichte van de basislijn. Negatief naar beneden

rente - aangegeven in percentages. Een positief getal verschuift naar boven ten opzichte van de basislijn. Negatief naar beneden

• Standaardwaarde voor verticale uitlijning:
• basislijn (voor inline-elementen)

midden (voor tabelcellen)

Het meest voorkomende gebruik van verticaal uitlijnen is in tabelcellen. In het etiket

gebruik het valign attribuut.

CSS valign-syntaxis voor tabellen

Waar waarde de volgende waarden kan aannemen:

• basislijn - uitlijning met de eerste basislijn tekstreeks
• onder - uitlijnen met de onderrand van de tabelcel
• midden - uitlijning met het midden van de cel
• boven - uitlijnen met de bovenrand van de cel

Bijvoorbeeld:

of

Uitlijnen naar boven

Uitlijning midden

Onderste uitlijning

Uitlijnen naar boven

Uitlijning midden

Onderste uitlijning

Voorbeelden met verticale uitlijningen Voorbeeld 1: waarden voor verticale uitlijning: basislijn, onder, boven, sub .vert_align_baseline ( weergave : inline-block ; verticaal uitlijning : basislijn ; achtergrond : #ccc ; ) .vert_align_top ( weergave : inline-block ; verticaal -align: top; achtergrond: #ccc ) .vert_align_bottom (weergave: inline-block; verticaal uitlijnen: onderkant; achtergrond: #ccc; ) .vert_align_sub (weergave: inline-block; verticaal uitlijnen: sub; achtergrond: # ccc ) .vert_align_text_top (weergave: inline-block; verticaal uitlijnen: top; achtergrond: #ccc;)
Uitgelijnde tekst vert_align_baseline
Uitgelijnde tekst vert_align_bottom
Uitgelijnde tekst vert_align_top
Tekst met vert_align_sub uitlijning Voorbeeld 2: waarden verticaal uitlijnen: absolute waarden en percentages

Hieronder staan ​​voorbeelden van verticale uitlijning met absolute waarde en percentages.

.vert_align_abs_plus (weergave: inline-block; verticaal uitlijnen: 10px; achtergrond: #aaa; ) .vert_align_abs_minus (weergave: inline-block; verticaal uitlijnen: -5px; achtergrond: #aaa; ) .vert_align_per_plus (weergave: inline- blok; verticaal uitlijnen: 50%; achtergrond: #aaa; .vert_align_per_minus (weergave: inline-blok; verticaal uitlijnen: -30%; achtergrond: #aaa;)

Converteert naar het volgende op de pagina:

Bronreeks. Tekst 10 pixels omhoog uitgelijnd
Bronreeks. Tekst 5 pixels naar beneden uitgelijnd
Bronreeks. Tekst 50% omhoog uitgelijnd
Bronreeks. Tekst 30% naar beneden uitgelijnd

Opmerking

De verticale uitlijning: middelste waarde lijnt het inline-element niet uit met het midden van de groot element in de rij (zoals je zou verwachten). In plaats daarvan lijnt de waarde midden het element uit ten opzichte van de hypothetische waarde kleine letter"X" (ook wel x-hoogte genoemd).

Om toegang te krijgen tot verticale uitlijning vanuit JavaScript, moet u de volgende constructie schrijven:

object.style.verticalAlign ="VALUE "

Vaak is het bij een lay-out nodig om een ​​element horizontaal en/of verticaal te centreren. Daarom besloot ik er een artikel mee te maken op verschillende manieren gecentreerd zodat alles op één plek bij de hand is.

Horizontale uitlijningsmarge: automatisch

Horizontale uitlijning met behulp van marge wordt gebruikt als de breedte van het gecentreerde element bekend is. Werkt voor blokelementen:

Elem (marge-links: auto; marge-rechts: auto; breedte: 50%; )

Als u auto opgeeft voor de rechter- en linkermarge, worden deze gelijk, waardoor het element horizontaal binnen het bovenliggende blok wordt gecentreerd.

tekst uitlijnen: centreren

Deze methode Geschikt voor gecentreerde tekst binnen een blok. tekst uitlijnen: centreren:

Uitlijning met tekstuitlijning .wrapper ( tekstuitlijning: centreren; )

Ik ben gecentreerd uitgelijnd

positie en negatieve marge over

Geschikt voor het centreren van blokken met bekende breedte. We geven de positie van het bovenliggende blok: relatief ten opzichte van de positie ten opzichte ervan, de gecentreerde elementpositie: absoluut, links: 50% en een negatieve marge-links waarvan de waarde gelijk is aan de helft van de breedte van het element:

Uitlijning met behulp van position .wrapper ( position: relatief; ) .wrapper p ( links: 50%; marge: 0 0 0 -100px; position: absoluut; breedte: 200px; )

Ik ben gecentreerd uitgelijnd

weergave: inline-block + tekst-uitlijning: gecentreerd

De methode is geschikt voor het uitlijnen van blokken met een onbekende breedte, maar vereist een wrapper-ouder. U kunt een horizontaal menu bijvoorbeeld op deze manier centreren:

Uitlijning met display: inline-block + tekst-uitlijning: gecentreerd;

• .navigation (tekst uitlijnen: centreren; ) .navigation li (weergave: inline-block; )
• Thuis

Over de auteur

Verticale uitlijning lijnhoogte Om één regel tekst uit te lijnen, kunt u gebruiken dezelfde waarden

hoogte en regelafstand voor het bovenliggende blok. Geschikt voor knoppen, menu-items etc.

lijnhoogte .wrapper ( hoogte: 100px; lijnhoogte: 100px; )

Ik ben verticaal uitgelijnd

positie en negatieve marge omhoog

Een element kan verticaal worden uitgelijnd door het een vaste hoogte te geven en een vaste positie toe te passen: absoluut en een negatieve marge naar boven gelijk aan de helft van de hoogte van het uit te lijnen element. Het ouderblok moet de positie krijgen: relatief:

Wrapper ( positie: relatief; ) elem ( hoogte: 200px; marge: -100px 0 0; positie: absoluut; boven: 50%; )

Op deze manier kunt u met behulp van positionering en negatieve marges een element op de pagina centreren.

Voor verticale uitlijning wordt de eigenschap display: table-cell op het element toegepast, waardoor het wordt gedwongen een tabelcel te emuleren. We stellen ook de hoogte en verticale uitlijning in: middle . Laten we dit allemaal in een container verpakken met de dislpay: table property; :

Weergave verticale uitlijning: tabelcel .wrapper (weergave: tabel; breedte: 100%; ) .cell (weergave: tabelcel; hoogte: 100px; verticaal uitlijnen: midden; )

lijnhoogte .wrapper ( hoogte: 100px; lijnhoogte: 100px; )

Dynamische uitlijning van een element op een pagina

We hebben gekeken naar manieren om elementen op een pagina uit te lijnen met behulp van CSS. Laten we nu eens kijken naar de jQuery-implementatie.

Laten we jQuery verbinden met de pagina:

Ik stel voor om te schrijven eenvoudige functie Als u een element op de pagina centreert, noemen we het alignCenter() . Het element zelf fungeert als argument voor de functie:

Functie alignCenter(elem) ( // code hier )

In de hoofdtekst van de functie berekenen en wijzen we dynamisch de coördinaten van het paginacentrum toe aan de CSS-eigenschappen links en bovenaan:

Functie alignCenter(elem) ( elem.css(( links: ($(window).width() - elem.width()) / 2 + "px", boven: ($(window).height() - elem. height()) / 2 + "px" // vergeet niet position: absolute toe te voegen aan het element om coördinaten te activeren )) )

In de eerste regel van de functie krijgen we de breedte van het document en trekken daarvan de breedte van het element af, in tweeën gedeeld - dit is het horizontale midden van de pagina. De tweede regel doet hetzelfde, alleen met hoogte voor verticale uitlijning.

De functie is klaar, het enige dat overblijft is om deze te koppelen aan de DOM-gereedheids- en venstergroottegebeurtenissen:

$(function() ( // roep de centreerfunctie aan wanneer de DOM gereed is alignCenter($(elem)); // roep de functie aan bij het wijzigen van de grootte van het venster $(window).resize(function() ( alignCenter($(elem) )); )) // functie voor centreren van elementen function alignCenter(elem) ( elem.css(( // berekening van de linker- en bovenste coördinaten links: ($(window).width() - elem.width()) / 2 + " px", top: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Toepassing van Flexbox

Nieuwe CSS3-functies, zoals Flexbox, worden langzamerhand gemeengoed. De technologie helpt bij het maken van markeringen zonder gebruik te maken van floats, positionering, enz. Het kan ook worden gebruikt om elementen te centreren. Pas Flexbox bijvoorbeeld toe op het bovenliggende element.wrapper en centreer de inhoud erin:

Wrapper (weergave: -webkit-box; weergave: -moz-box; weergave: -ms-flexbox; weergave: -webkit-flex; weergave: flex; hoogte: 500px; breedte: 500px; ) .wrapper .content (marge: auto; /* marge: 0 auto; alleen horizontaal */ /* marge: auto 0; alleen verticaal */ ) Lorem ipsum dolor sit amet

Deze regel centreert het element tegelijkertijd horizontaal en verticaal. De marge werkt nu niet alleen voor horizontale uitlijning, maar ook voor verticale uitlijning. En zonder bekende breedte/hoogte.

Gerelateerde bronnen Help het project

Vandaag, beste lezer, zullen we het probleem van verticale uitlijning in het blok behandelen div.

Hoogstwaarschijnlijk weet u al van het bestaan ​​van de prachtige CSS-eigenschap verticaal uitlijnen.

En God zelf heeft ons opgedragen om precies deze eigenschap te gebruiken voor verticale uitlijning (het heeft niet voor niets zo'n vanzelfsprekende naam).

Probleemstelling: Het is noodzakelijk om de inhoud van een blok met variabele hoogte gecentreerd ten opzichte van de verticaal uit te lijnen.

Laten we nu beginnen met het oplossen van het probleem.

En dus hebben we een blok, waarvan de hoogte kan veranderen:

Inhoud blokkeren

En dus hebben we een blok, waarvan de hoogte kan veranderen:

Het eerste dat in je opkomt is om de volgende schijnbeweging te maken: En dus hebben we een blok, waarvan de hoogte kan veranderen: Er is alle reden om aan te nemen dat de zinsnede

wordt uitgelijnd met de middenhoogte van de div-container. Maar dat was niet het geval! Op deze manier zullen we geen verwachte middenuitlijning bereiken. Waarom? Het lijkt erop dat alles correct is aangegeven. Het blijkt dat dit het probleem is: het onroerend goed verticaal uitlijnen

kan alleen worden gebruikt om de inhoud van tabelcellen uit te lijnen of om inline-elementen ten opzichte van elkaar uit te lijnen.

Wat betreft de uitlijning binnen een tabelcel, denk ik dat alles duidelijk is. Maar ik zal een ander geval uitleggen met inline-elementen.

Verticale uitlijning van inline-elementen Stel dat u een regel tekst heeft die is opgedeeld door regeltags

in delen:

Een stukje tekst heet je welkom! Een inlinetag is een container waarvan het uiterlijk er niet toe leidt dat de inhoud wordt overgebracht.

nieuwe lijn

De actie van de block-tag zorgt ervoor dat de inhoud van de container naar een nieuwe regel loopt. , is een bloktag. Als we stukjes tekst in blokken omsluiten dan zal elk van hen op een nieuwe regel staan. Label gebruiken , die, in tegenstelling tot , is kleine letters, containers worden niet naar een nieuwe regel verplaatst, alle containers

blijft op één lijn. Houder

handig om te gebruiken bij het specificeren van een deel van de tekst met speciale opmaak (markeren met een kleur, een ander lettertype, enz.) Voor containers

#perviy( verticaal uitlijnen:sub; ) #vtoroy( verticaal uitlijnen:3px; ) #tretiy( verticaal uitlijnen:-3px; )

De resulterende tekstregel ziet er als volgt uit:

Dit is niets anders dan de verticale uitlijning van inline-elementen, en CSS-eigenschap verticaal uitlijnen kan deze taak perfect aan.

We raakten een beetje afgeleid, nu keren we terug naar onze hoofdtaak.

Verticale uitlijning in div-container

Wat er ook gebeurt, we zullen de eigenschap vertical-align gebruiken voor uitlijning binnen de div-container. Zoals ik al zei, dit pand kan worden gebruikt bij het uitlijnen van inline-elementen (we hebben dit geval hierboven in detail besproken en het is niet geschikt voor ons voor uitlijning in een div-container); het enige dat overblijft is het feit dat te gebruiken Maar dat was niet het geval! Op deze manier zullen we geen verwachte middenuitlijning bereiken. Waarom? Het lijkt erop dat alles correct is aangegeven. Het blijkt dat dit het probleem is: het onroerend goed werkt voor tabelcellen.

Hoe kunnen we dit gebruiken? Wij hebben geen tafel, wij werken met een div container.

Haha, het blijkt heel simpel te zijn.

Met de CSS-weergave-eigenschap kunnen we ons div-blok in een tabelcel veranderen, dit kan eenvoudig en natuurlijk worden gedaan:

Laten we zeggen dat we een klassendiv hebben tekst uitlijnen:

En dus hebben we een blok, waarvan de hoogte kan veranderen:

Voor dit blok specificeren we de volgende CSS-eigenschap:

Textalign( weergave: tabelcel; )

Deze CSS-instructie zal onze div op miraculeuze wijze in een tabelcel veranderen zonder deze op enige manier visueel te veranderen. En voor een tabelcel kunnen we de eigenschap toepassen Maar dat was niet het geval! Op deze manier zullen we geen verwachte middenuitlijning bereiken. Waarom? Het lijkt erop dat alles correct is aangegeven. Het blijkt dat dit het probleem is: het onroerend goed volledig en de gewenste verticale uitlijning zal werken.

Alles kan echter niet zo eenvoudig eindigen. We hebben een prachtige IE-browser. Hij weet niet hoe hij met het pand moet omgaan weergave: tabelcel(Ik stel voor dat u de tabel leest die de functionaliteit van deze CSS-eigenschap in verschillende browsers op de website htmlbook.ru illustreert). Daarom zullen we onze toevlucht moeten nemen tot verschillende trucs.

Er zijn veel manieren om uitlijning in een div-container voor alle browsers te bereiken:

• Methode met behulp van een extra hulpdiv-container
• Methode met behulp van expressie. Het houdt verband met een lastige berekening van blokhoogten. Dit kun je niet doen zonder kennis van JavaScript.
• De eigenschap line-height gebruiken. Deze methode is alleen geschikt voor verticale uitlijning in een blok met bekende hoogte en is daarom in het algemene geval niet toepasbaar.
• Gebruik van absolute en relatieve inhoudsverschuiving in het geval van IE-browser. Deze methode lijkt mij het meest begrijpelijk en eenvoudig. Bovendien is het implementeerbaar voor een div-container met variabele hoogte. We zullen er dieper op ingaan.

Zoals u begrijpt, hoeven we alleen het probleem van de verticale uitlijning in IE op te lossen, dat verband houdt met het verkeerd begrijpen van de eigenschap weergave: tabelcel(noch IE6, noch IE7, noch IE8 zijn bekend met deze eigenschap). Daarom zullen we, met behulp van een voorwaardelijke opmerking specifiek voor browsers van de IE-familie, andere CSS-eigenschappen aangeven.

Voorwaardelijke opmerking

Constructietype:

... Instructies die alleen van toepassing zijn als de voorwaarde tussen vierkante haakjes waar is...

wordt een voorwaardelijke opmerking genoemd (let op, het type voorwaardelijk commentaar moet volledig overeenkomen met het gegeven voorbeeld, tot op een spatie na).

De instructies in een dergelijk voorwaardelijk commentaar worden alleen uitgevoerd als de browser dit interpreteert deze code, behoort tot de IE-familie.

Met behulp van een voorwaardelijke opmerking kunnen we dus een stukje code verbergen voor alle browsers behalve IE.

Probleem oplossing

Vanwege al deze peterselie zullen we onze HTML-code moeten voorzien van twee extra containers. Dit is hoe ons tekstblok eruit zal zien:

Dit is een soort verificatietekst.
Het bestaat uit twee lijnen.

Voor div-containerklasse tekst uitlijnen Er zijn CSS-eigenschappen ingesteld die de inhoud voor iedereen verticaal uitlijnen normale browsers(behalve IE natuurlijk):

Weergave: tabelcel; verticaal uitlijnen: midden;

En nog twee eigenschappen die de breedte en hoogte van het blok instellen:

Breedte: 500px; hoogte: 500px;

Dit is voldoende om de inhoud van de container verticaal uit te lijnen, in alle browsers behalve IE.

Nu beginnen we eigenschappen toe te voegen die verband houden met uitlijning voor browsers van de IE-familie (voor hen hebben we extra blokken gebruikt div En span):

Verwijzend naar het label div binnen een klassenblok tekst uitlijnen. Om dit te doen, moet u eerst de naam van de klasse opgeven en vervolgens, gescheiden door een spatie, de tag waartoe we toegang hebben.

Textalign div( positie: absoluut; bovenaan: 50%; )

Dit ontwerp betekent: voor iedereen div-tags in een blok met een klas tekst uitlijnen pas de vermelde eigenschappen toe.

Dienovereenkomstig zijn de stijlen gespecificeerd voor het blok tekst uitlijnen zijn aangepast:

Textalign(weergave: tabelcel; verticaal uitlijnen: midden; breedte:500px; hoogte: 500px; positie: relatief; )

Nu wordt het punt linksboven van het tekstblok met 50% naar beneden verplaatst.

Om uit te leggen wat er gebeurt, heb ik een illustratie getekend:

Zoals je op de foto kunt zien, hebben we enige vooruitgang geboekt. Maar dat is niet alles! Het punt linksboven van het gele blok is inderdaad 50% naar beneden verplaatst ten opzichte van het bovenliggende (paarse) blok. Maar we hebben vijftig procent van de hoogte van het paarse blok nodig om het midden van het gele blok te zijn, en niet het punt linksboven.

Nu komt de tag in het spel span en zijn relatieve positionering:

Textalign span( positie: relatief; boven: -50%; )

We hebben het gele blok dus met 50% van zijn hoogte verschoven ten opzichte van initiële positie. Zoals u begrijpt, is de hoogte van het gele blok gelijk aan de hoogte van de gecentreerde inhoud. En bij de laatste bewerking op de spancontainer werd onze inhoud in het midden van het paarse blok geplaatst. Hoera!

Laten we een beetje vals spelen

Allereerst moeten we peterselie voor alle normale browsers verbergen en openen voor IE. Dit kan uiteraard met behulp van een voorwaardelijke opmerking; het is niet voor niets dat we er kennis mee hebben gemaakt:

.textalign div( positie: absoluut; bovenaan: 50%; ) .textalign span( positie: relatief; bovenaan: -50%; )

Er is een klein probleem.

Als de gecentreerde inhoud te hoog is, leidt dit tot onaangename gevolgen: er is een extra hoogte voor de verticale scroll. Oplossing voor het probleem: u moet een eigenschap toevoegen overloop: verborgen blok

tekst uitlijnen. Maak kennis met het pand in detail overloop

mogelijk bij. tekst uitlijnen De laatste CSS-instructies voor het blok

heeft de vorm:

Textalign(weergave: tabelcel; verticaal uitlijnen: midden; breedte: 500px; hoogte: 500px; positie: relatief; overloop: verborgen; rand: 1px effen zwart; ) Sorry, ik vergat er één te vermelden belangrijk punt tekst uitlijnen. Als u de hoogte van een klassenblok probeert in te stellen

procentueel gezien, dan zal er niets voor u uitkomen.

Centrering in blok met variabele hoogte tekst uitlijnen Heel vaak is het nodig om de hoogte van een klassenblok in te stellen

niet in pixels, maar als een percentage van de hoogte van het bovenliggende blok, en lijn de inhoud van de div-container in het midden uit. tekst uitlijnen Het probleem is dat het onmogelijk is om dit te doen voor een tabelcel (maar het klassenblok verandert dankzij de eigenschap precies in een tabelcel).

weergave: tabelcel In dit geval moet u gebruiken externe eenheid , waarvoor de CSS-eigenschap is opgegeven weergave: tafel verandert dankzij de eigenschap precies in een tabelcel en stel al de procentuele waarde van de hoogte ervoor in. Vervolgens werd het blok erin genest, met de CSS-richtlijn

, zal met plezier de hoogte van het bovenliggende blok erven.

Om in ons voorbeeld een blok met variabele hoogte te implementeren, zullen we de CSS een beetje bewerken: tekst uitlijnen Naar de klas wij zullen de waarde van het onroerend goed wijzigen weergave Met tafel-cel op tafel en verwijder de uitlijningsrichtlijn verticaal uitlijnen: midden

. Nu kunnen we de hoogtewaarde veilig wijzigen van 500 pixels naar bijvoorbeeld 100%. tekst uitlijnen Dus de CSS-eigenschappen voor het klassenblok

zal er als volgt uitzien:

Het enige dat overblijft is het implementeren van contentcentrering. Om dit te doen, is een div-container genest in een klassenblok tekst uitlijnen(dit is hetzelfde gele blok in de afbeelding), je moet de CSS-eigenschap instellen verandert dankzij de eigenschap precies in een tabelcel, dan zal het de hoogte van 100% overnemen van het bovenliggende blok tekst uitlijnen(paars blok). En niets houdt ons tegen om de inhoud van de geneste div-container in het midden uit te lijnen met de eigenschap en verwijder de uitlijningsrichtlijn.

Wij krijgen er nog één aanvullende lijst CSS-eigenschappen voor div blok genest in een container tekst uitlijnen.

Textalign div( weergave: tabelcel; verticaal uitlijnen: midden; )

Dat is de hele truc. Indien gewenst kunt u een variabele hoogte instellen met de inhoud gecentreerd.

Voor meer informatie over de verticale uitlijning van een blok met variabele hoogte, zie .