Uitlijning van div-blokken. CSS - Horizontale uitlijning

Van de auteur: Ik heet je opnieuw welkom op de pagina's van onze blog. In het artikel van vandaag wil ik het hebben over verschillende uitlijningstechnieken die kunnen worden toegepast op zowel blokken als hun inhoud. In het bijzonder hoe je blokken in CSS uitlijnt, evenals tekstuitlijning.

Blokken uitlijnen naar het midden

In CSS is het centreren van een blok eenvoudig. Dit is voor velen de meest bekende techniek, maar ik zou er nu eerst over willen praten. Dit betekent horizontaal gecentreerde uitlijning ten opzichte van het bovenliggende element. Hoe wordt het gedaan? Laten we zeggen dat we een container hebben en ons proefonderwerp zit erin:

Laten we aannemen dat dit de sitekop is. Het strekt zich niet uit over de gehele breedte van het venster en we moeten het centreren. Wij schrijven als volgt:

We moeten de exacte of maximale breedte en noteer vervolgens de sleuteleigenschap – marge: 0 auto. Het stelt de buitenste marges van onze koptekst in, de eerste waarde bepaalt de boven- en ondermarges, en de tweede bepaalt de rechter- en linkermarges. De waarde auto vertelt de browser om automatisch de opvulling aan beide zijden te berekenen, zodat het element precies gecentreerd is in het bovenliggende element. Comfortabel!

Uitlijning van tekst

Dit is ook een heel eenvoudige techniek. Om alles op één lijn te brengen inline-elementen kan worden gebruikt eigenschap tekst uitlijnen en de waarden ervan: links, rechts, midden. Dit laatste centreert de tekst, en dat is wat we nodig hebben. Je kunt een afbeelding zelfs op dezelfde manier uitlijnen, omdat het standaard ook een inline-element is.

Lijn tekst verticaal uit

Maar dit is ingewikkelder. Standaard is er geen eenvoudige, bekende eigenschap waarmee tekst gemakkelijk verticaal in een blokcontainer kan worden gecentreerd. Er zijn echter verschillende technieken die lay-outontwerpers in de loop der jaren hebben bedacht.

Stel de blokhoogte in met behulp van opvulling. De manier is om niet expliciet een hoogte in te stellen met behulp van hoogte, maar om deze kunstmatig te creëren met behulp van opvullingen aan de boven- en onderkant, die hetzelfde zouden moeten zijn. Laten we een willekeurig blok maken en de volgende eigenschappen ernaar schrijven:

div( achtergrond: #ccc; opvulling: 30px 0; )

De achtergrond is alleen bedoeld om ook de randen visueel te zien opvulling. Nu bestaat de hoogte van het blok uit deze twee inkepingen en de lijn zelf, en het ziet er allemaal zo uit:

Definieer de lijnhoogte voor het blok. Ik denk dat het meer is de juiste manier, als u één regel tekst wilt uitlijnen. Hiermee kunt u de hoogte normaal schrijven, met behulp van de eigenschap height. Hierna moet hij ook de lijnhoogte instellen, gelijk aan de hoogte van het blok als geheel.

div( hoogte: 60px; lijnhoogte: 60px; )

Het resultaat zal vergelijkbaar zijn met de bovenstaande afbeelding. Alles zal werken, zelfs als u opvulling toevoegt. Echter slechts voor één lijn. Als je dat nodig hebt meer tekst in het element, dan zal deze methode niet werken.

Converteer een blok naar een tabelcel. De essentie van deze methode is dat de tabelcel de eigenschap vertical-align: middle heeft, die het element verticaal centreert. Dienovereenkomstig moet het blok in dit geval op het volgende worden ingesteld:

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

Deze methode is goed omdat je zoveel tekst in het midden kunt uitlijnen als je wilt. Maar het is beter om display: table naar het blok te schrijven waarin onze div is genest, anders werkt het misschien niet.

Welnu, hier komen we bij de laatste techniek voor vandaag: dit is de verticale uitlijning van de blokken zelf. Het moet gezegd worden dat er, nogmaals, geen onroerend goed is dat specifiek hiervoor bedoeld is, maar er zijn een paar trucjes waar je op moet letten.

Stel de inspringingen in als een percentage. Als u de hoogte van een bovenliggend element kent en er een ander blokelement in plaatst, kunt u het centreren met behulp van procentuele opvulling. De ouder heeft bijvoorbeeld een hoogte van 600 pixels. Je plaatst er een blokje in van 300 pixels hoog. Hoeveel moet je aan de boven- en onderkant terugtrekken om het te centreren? Elk 150 pixels, wat 25% is van de lengte van de ouder.

Deze methode maakt uitlijning alleen mogelijk als de afmetingen berekeningen mogelijk maken. En als je ouder 887 pixels hoog is, kun je niets nauwkeurig opnemen, dit is al duidelijk.

Voeg een element in een tabelcel in. Nogmaals, als we het bovenliggende element in een tabelcel transformeren, wordt het blok dat erin wordt ingevoegd automatisch verticaal gecentreerd. Om dit te doen hoeft de ouder alleen maar verticaal uitlijnen: midden in te stellen.

En als we daarnaast ook nog margin: 0 auto schrijven, dan wordt het element horizontaal gecentreerd!

In CSS zijn sommige ogenschijnlijk eenvoudige dingen niet zo eenvoudig te doen. Eén van deze dingen is uitlijning, d.w.z. wanneer het ene element op een bepaalde manier ten opzichte van het andere moet worden gepositioneerd.

Dit artikel presenteert er enkele kant-en-klare oplossingen, wat het werk van het horizontaal en/of verticaal centreren van elementen zal helpen vereenvoudigen.

Let op: Onder elke oplossing staat een lijst met browsers die de versies aangeven waarin de opgegeven CSS-code werkt.

CSS - Blok centreren

1. Eén blok uitlijnen met het midden van een ander blok. In dit geval hebben de eerste en tweede blokken dynamische afmetingen.

Parent ( positie: relatief; ) .child ( positie: absoluut; links: 50%; top: 50%; -webkit-transform: vertalen(-50%, -50%); -moz-transform: vertalen(-50% , -50%); -ms-transform: vertalen(-50%, -50%); -o-transform: vertalen(-50%, -50%); ;)

• Chroom 4.0+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 10.5+
• Safari 3.1+

2. Eén blok uitlijnen met het midden van een ander blok. In dit geval heeft het tweede blok dat wel vaste maten.

Parent ( positie: relatief; ) .child ( positie: absoluut; links: 50%; boven: 50%; /* breedte en hoogte van 2 blokken */ breedte: 500px; hoogte: 250px; /* Waarden worden bepaald afhankelijk op de grootte */ /* margin-left = - breedte / 2 */ margin-left: -250px; /* margin-top = - hoogte / 2 */ margin-top: -125px )

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

3. Eén blok uitlijnen met het midden van een ander blok. In dit geval heeft het tweede blok afmetingen gespecificeerd in percentages.

Parent ( positie: relatief; ) .child ( positie: absoluut; /* breedte en hoogte van 2 blokken in % */ hoogte: 50%; breedte: 50%; /* Waarden worden bepaald afhankelijk van de grootte in % * / links: 25% /* (100% - breedte) / 2 */ boven: 25% /* (100% - hoogte) / 2 */ )

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 1.0+
• Internet Explorer 4.0+
• Opera 7.0+
• Safari 1.0+

CSS - Horizontale uitlijning

1. Eén blokelement (weergave: blok) horizontaal uitlijnen ten opzichte van een ander (waarin het zich bevindt):

Blokkeren (marge-links: auto; marge-rechts: auto; )

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 1.0+
• Internet Explorer 6.0+
• Opera 3.5+
• Safari 1.0+

2. Lijn een lijn- (weergave: inline) of lijnblok- (weergave: inline-blok)-element horizontaal uit:

Parent (tekst uitlijnen: centreren; ) .child (weergave: inline-block; )

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

CSS - Verticale uitlijning

1. Centreer het ene element (display: inline, display: inline-block) ten opzichte van het andere (waar het zich in bevindt) in het midden. Het bovenliggende blok in dit voorbeeld heeft een vaste hoogte, die wordt ingesteld met behulp van de CSS-eigenschap line-height.

Parent ( regelhoogte: 500px; ) .child ( weergave: inline-block; verticaal uitgelijnd: midden; )

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 3.0+
• Internet Explorer 8.0+
• Opera 7.0+
• Safari 1.0+

2. Het ene blok verticaal ten opzichte van het andere centreren door de ouder als een tabel weer te geven, en het kind als een cel van deze tabel.

Parent (weergave: tabel; ) .child (weergave: tabelcel; verticaal uitgelijnd: midden; )

Browsers die deze oplossing ondersteunen:

• Chroom 1.0+
• Firefox 1.0+
• Internet Explorer 8.0+
• Opera 7.5+
• Safari 1.0+

Als je nog andere interessante trucs of handige kant-en-klare uitlijnoplossingen kent, deel ze dan in de reacties.

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. 30%.

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 :left; breedte:300px; tekst-uitlijning:center; lettergrootte:18px; #content(achtergrond:#ffffff; marge-links:30%; hoogte:300px; tekst-uitlijning:center; ) #footer(achtergrond: #3e4982; helder: beide; breedte: 100%; hoogte: 50px; tekst uitlijnen: midden; kleur: #FFFFFF opvulling: 10px;

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... bij het uitrekken van een menublok: a 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. Bij rubberen lay-out Pagina's beslaan de volledige breedte van het scherm, dus pagina-uitlijning is niet vereist.

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:center; ) #footer( achtergrond:#3e4982; helder:beide; breedte:800px; hoogte:50px; tekst-uitlijnen:center; kleur:#FFFFFF; lettertype- maat: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; lettertypegrootte: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; in feite zijn dit geen dogma's. Je kunt experimenteren en je eigen versie bedenken, kijk gewoon hoe het werkt verschillende browsers. 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!

Heel vaak is het de taak om een ​​blok in het midden van de pagina/het scherm uit te lijnen, en zelfs zo dat zonder Java-script, zonder taak stijve maten of negatieve inspringingen, zodat schuifbalken ook voor het bovenliggende blok werken als het blok groter wordt. 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.

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.

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.

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.

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.

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.

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.

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

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:

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

Hoogstwaarschijnlijk weet u al dat er een prachtige CSS-eigenschap bestaat verticaal uitlijnen. En God zelf beval ons om precies deze eigenschap te gebruiken voor verticale uitlijning (het heeft niet voor niets zo'n vanzelfsprekende naam).

Probleemstelling: U moet de inhoud van een blok met variabele hoogte centreren ten opzichte van de verticaal.

Laten we nu beginnen met het oplossen van het probleem.

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

Het eerste dat in je opkomt is om de volgende schijnbeweging te maken:

Er is alle reden om aan te nemen dat de zinsnede Inhoud blokkeren 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:

Jij verwelkomt deel tekst!

Onder label in kleine letters wordt opgevat als een container waarvan het uiterlijk niet leidt tot de overdracht van de inhoud nieuwe lijn.

De actie van de block-tag zorgt ervoor dat de inhoud van de container naar een nieuwe regel loopt.

- Dit blok-tag. Als we stukjes tekst in blokken omsluiten

, dan zal elk van hen op een nieuwe regel staan. Label gebruiken , wat, 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 speciale opmaak(markering met kleur, ander lettertype, enz.)

Voor containers Pas de volgende CSS-eigenschappen toe:

#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, voor uitlijning binnen de div-container zullen we de eigenschap gebruiken verticaal uitlijnen. 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 verticaal uitlijnen 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.

CSS-eigenschap weergave Hiermee kunt u ons div-blok in een tabelcel veranderen, dit kan eenvoudig en natuurlijk worden gedaan:

Laten we zeggen dat we een klassendiv hebben tekst uitlijnen:

Voor dit blok specificeren we de volgende CSS-eigenschap:

Textalign(weergave: tabelcel; )

Deze CSS-instructie zal onze div op wonderbaarlijke wijze in een tabelcel veranderen zonder deze op enige manier visueel te veranderen. En voor een tabelcel kunnen we de eigenschap toepassen verticaal uitlijnen 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 extra div-container
• Methode met behulp van expressie. Het houdt verband met een lastige berekening van blokhoogten. Zonder JavaScript-kennis er is geen manier omheen.
• De eigenschap line-height gebruiken. Deze methode alleen geschikt voor verticale uitlijning in een blok met bekende hoogte, en dus in algemeen geval niet van toepassing.
• 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 niet bekend met deze woning). Daarom gebruiken voorwaardelijk commentaar We zullen verschillende CSS-eigenschappen specificeren specifiek voor IE-browsers.

Voorwaardelijke opmerking

Constructietype:

... Инструкции, действующие только в случае выполнения условия в квадратных скобках...

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:

Voor de klasse div-container 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 in alle browsers gecentreerd ten opzichte van de verticaal uit te lijnen behalve IE.

Nu beginnen we eigenschappen toe te voegen die verband houden met uitlijning voor browsers van de IE-familie(voor hen gebruikten we extra blokken 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 het punt linksboven tekstblok met 50% naar beneden verschoven.

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 het nodig dat het zich op vijftig procent van de hoogte van het paarse blok bevindt. midden van het gele blok, 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 laatste operatie met een spancontainer 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:

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: moet een eigenschap worden toegevoegd overloop: verborgen blok tekst uitlijnen.

Maak kennis met het pand in detail overloop mogelijk bij.

De laatste CSS-instructies voor het blok tekst uitlijnen 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. Als je het probeert stel de hoogte van het klassenblok in tekst uitlijnen V percentage , dan heb je niets zal werken.

Centrering in blok met variabele hoogte

Heel vaak is het nodig om de hoogte van een klassenblok in te stellen tekst uitlijnen 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.

Het probleem is dat het onmogelijk is om dit te doen voor een tabelcel (maar het klassenblok tekst uitlijnen wordt dankzij de eigenschap precies een tabelcel weergave: tabelcel).

In dit geval moet u een extern blok gebruiken waarvoor de CSS-eigenschap is opgegeven weergave: tafel en stel al de procentuele waarde van de hoogte ervoor in. Vervolgens werd het blok erin genest, met de CSS-richtlijn weergave: tabelcel, 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:

Naar de klas tekst uitlijnen 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%.

Dus de CSS-eigenschappen voor het klassenblok tekst uitlijnen zal er als volgt uitzien:

Textalign(weergave: tabel; breedte:500px; hoogte: 100%; positie: relatief; overloop: verborgen; rand: 1px effen zwart; )

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 weergave: 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 verticaal uitlijnen: midden.

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.

Aanvullende informatie over verticale uitlijning blok met variabele hoogte kan worden verkregen.