Toate metodele de aliniere verticală în CSS. Centrați un element pe verticală folosind CSS

Alinierea elementelor pe orizontală și pe verticală se poate face în diferite moduri. Alegerea metodei depinde de tipul elementului (bloc sau inline), tipul poziționării acestuia, dimensiunea etc.

1. Alinierea orizontală la centrul blocului/pagina 1.1. Dacă blocul are o lățime: div ( lățime: 300px; margine: 0 auto; /*centrați elementul orizontal în blocul părinte*/ )

Dacă doriți să aliniați un element inline în acest fel, acesta trebuie să fie setat să afișeze: bloc;

1.2. Dacă un bloc este imbricat într-un alt bloc și nu are lățime/specificată: .wrapper (text-align: center;) 1.3. Dacă lățimea blocului este setată și trebuie să o fixați în centrul blocului părinte: .wrapper (poziție: relativă; /* setați poziționarea relativă pentru blocul părinte, astfel încât apoi să putem poziționa absolut blocul în interiorul acestuia * /) .box ( lățime: 400px; poziție: absolut; stânga: 50%; margin-left: -200px; /*deplasați blocul la stânga cu o distanță egală cu jumătate din lățime*/ ) 1.4. Dacă blocurile nu au o lățime specificată, le puteți centra folosind un bloc de wrapper părinte: .wrapper (text-align: center; /*center the content of the block*/) .box ( display: inline-block; / *aranjați blocurile într-un rând orizontal*/ margin-right: -0.25em /*eliminați marginea din dreapta dintre blocuri*/ ) 2. Alinierea verticală 2.1. Dacă textul ocupă un rând, de exemplu, pentru butoane și elemente de meniu: .button ( înălțime: 50px; line-height: 50px; ) 2.2. Pentru a alinia un bloc vertical în interiorul unui bloc părinte: .wrapper (poziție: relativ;) .box (înălțime: 100px; poziție: absolut; sus: 50%; margine: -50px 0 0 0; ) 2.3. Alinierea verticală după tipul tabelului: .wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; ) 2.4. Dacă unei casete i se dă o lățime și o înălțime și trebuie să fie centrată pe caseta părinte: .wrapper (poziție: relativ; ) .box (înălțime: 100px; lățime: 100px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; margine: auto: auto, pentru ca conținutul să nu se extindă; Poziționare absolută în centrul paginii/blocului folosind transformarea CSS3:

dacă sunt specificate dimensiuni pentru element

div ( width: 300px; /*setează lățimea blocului*/ height:100px; /*setează înălțimea blocului*/ transform: translate(-50%, -50%); poziție: absolut; top: 50 %; stânga: 50% ;

dacă elementul nu are dimensiuni și nu este gol

Un text aici h1 (marja: 0; transformare: traducere(-50%, -50%); poziție: absolut; sus: 50%; stânga: 50%; )

Foarte des în aspect este necesară centrarea unui element orizontal și/sau vertical. Prin urmare, am decis să fac un articol cu moduri diferite de centrare, astfel încât totul să fie la îndemână într-un singur loc.

Marja de aliniere orizontală: automată

Alinierea orizontală folosind marginea este utilizată atunci când lățimea elementului centrat este cunoscută. Lucrări pentru elemente de bloc:

Element ( margine-stânga: automat; margine-dreapta: automat; lățime: 50%; )

Specificarea automată pentru marginile din dreapta și din stânga le face egale, ceea ce centrează elementul orizontal în blocul părinte.

text-align: centru

Această metodă este potrivită pentru centrarea textului într-un bloc. text-align: center:

Aliniere cu text-align .wrapper ( text-align: center; )

Sunt aliniat la centru

poziție și marja negativă stângă

Potrivit pentru centrarea blocurilor de lățime cunoscută. Oferim poziția blocului părinte: relativ la poziția relativ la acesta, poziția elementului centrat: absolut , stânga: 50% și o marjă negativă-stânga a cărei valoare este egală cu jumătate din lățimea elementului:

Alinierea folosind poziția .wrapper ( poziție: relativ; ) .wrapper p ( stânga: 50%; marjă: 0 0 0 -100px; poziție: absolut; lățime: 200px; )

Sunt aliniat la centru

display: inline-block + text-align: center

Metoda este potrivită pentru alinierea blocurilor de lățime necunoscută, dar necesită un părinte de ambalare. De exemplu, puteți centra un meniu orizontal astfel:

Aliniere cu afișaj: inline-block + text-align: center; .navigation ( text-align: center; ) .navigation li ( display: inline-block; )

Linie de aliniere verticală-înălțime

Pentru a alinia o linie de text, puteți utiliza aceleași valori de înălțime și spațiere între rânduri pentru blocul părinte. Potrivit pentru butoane, elemente de meniu etc.

line-height .wrapper ( înălțime: 100px; line-height: 100px; )

Sunt aliniat vertical

poziție și marja negativă în sus

Un element poate fi aliniat vertical dându-i o înălțime fixă și aplicând o poziție: absolută și o marjă negativă în sus egală cu jumătate din înălțimea elementului aliniat. Blocului părinte trebuie să i se atribuie poziția: relativă:

Wrapper ( poziție: relativă; ) elem ( înălțime: 200px; margine: -100px 0 0; poziție: absolut; sus: 50%; )

Astfel, folosind poziţionarea şi marginile negative, puteţi centra un element pe pagină.

afișare: tabel-celulă

Pentru alinierea verticală, proprietatea display: table-cell este aplicată elementului, ceea ce îl forțează să emuleze o celulă de tabel. De asemenea, îi setăm înălțimea și alinierea verticală: mijloc . Să înfășurăm toate acestea într-un container cu proprietatea dislpay:; :

Afișare aliniere verticală: table-cell .wrapper ( afișare: tabel; lățime: 100%; ) .cell ( afișare: table-cell; înălțime: 100px; vertical-align: middle; )

Sunt aliniat vertical

Alinierea dinamică a unui element pe o pagină

Am analizat modalități de a alinia elemente pe o pagină folosind CSS. Acum să aruncăm o privire la implementarea jQuery.

Să conectăm jQuery la pagină:

Vă sugerez să scrieți o funcție simplă pentru a centra un element pe pagină, să-l numim alignCenter() . Elementul însuși acționează ca un argument al funcției:

Funcția alignCenter(elem) ( // codează aici )

În corpul funcției, calculăm dinamic și atribuim coordonatele centrului paginii proprietăților CSS din stânga și de sus:

Funcția alignCenter(elem) ( elem.css(( stânga: ($(window).width() - elem.width()) / 2 + "px", sus: ($(window).height() - elem. height()) / 2 + "px" // nu uitați să adăugați poziție: absolută elementului pentru a declanșa coordonatele )) )

În prima linie a funcției, obținem lățimea documentului și scădem din el lățimea elementului, împărțit la jumătate - acesta va fi centrul orizontal al paginii. A doua linie face același lucru, doar cu înălțimea pentru alinierea verticală.

Funcția este gata, tot ce rămâne este să o atașați la evenimentele de pregătire DOM și de redimensionare a ferestrei:

$(function() ( // apelează funcția de centrare când DOM-ul este gata alignCenter($(elem)); // apelează funcția când redimensionează fereastra $(window).resize(function() ( alignCenter($(elem) )); )) // funcția de centrare a elementelor alignCenter(elem) ( elem.css(( // se calculează coordonatele stânga și sus la stânga: ($(window).width() - elem.width()) / 2 + " px", sus: ($(window).height() - elem.height()) / 2 + "px" )) ) ))

Aplicarea Flexbox

Noile funcții CSS3, cum ar fi Flexbox, devin treptat obișnuite. Tehnologia ajută la crearea de markup fără a utiliza floats, poziționare etc. Poate fi folosit și pentru centrarea elementelor. De exemplu, aplicați Flexbox elementului părinte element.wrapper și centrați conținutul în interior:

Wrapper ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; înălțime: 500px; lățime: 500px; ) .wrapper .conținut ( marja: auto; /* margine: 0 auto numai pe orizontală */ /* margine: auto 0 numai pe verticală */ ) Lorem ipsum dolor sit amet

Această regulă centrează elementul orizontal și vertical în același timp - marginea funcționează acum nu numai pentru alinierea orizontală, ci și pentru cea verticală. Și fără o lățime/înălțime cunoscută.

Resurse aferente Ajută proiectul

În general, centrarea elementelor HTML pe o pagină nu este o chestiune dificilă. În unele cazuri... dezvoltatorii web trebuie să-și dezvolte mintea pentru a găsi cea mai bună soluție.

Centrarea elementelor pe orizontală nu este atât de dificilă, ridică deja întrebări, dar combinarea lor în general poate fi nedumerită. În era designului responsive, rareori suntem clari cu privire la dimensiunile exacte ale anumitor elemente. Am numărat 6 moduri diferite de a centra elementele folosind CSS. Să începem cu exemple simple și să terminăm cu altele mai complexe. Va funcționa cu același cod HTML:

Alinierea orizontală folosind text-align

Uneori, cea mai simplă soluție este cea mai bună:

Div.center ( text-align: center; background: hsl(0, 100%, 97%); ) div.center img ( lățime: 33%; înălțime: automat; )

Nu există nicio centrare verticală aici: pentru aceasta va trebui să adăugați proprietățile margin-top și margin-bottom la div.

Centrare cu margine: auto

O altă soluție pentru alinierea orizontală:

Div.center ( fundal: hsl(60, 100%, 97%); ) div.center img ( afișare: bloc; lățime: 33%; înălțime: automat; margine: 0 automat; )

Vă rugăm să rețineți că pentru această metodă trebuie să setați afișarea: proprietatea bloc.

Centrare folosind tabel-celula

Utilizând display: table-cell, ne putem asigura că elementul este centrat atât pe verticală, cât și pe orizontală. Dar aici trebuie să plasăm imaginea într-un alt element div.

Aliniat la centru ( afișare: tabel; fundal: hsl(120, 100%, 97%); lățime: 100%; ) .center-core ( afișare: tabel-celulă; text-align: centru; vertical-align: mijloc; ) .img miez central ( lățime: 33%; înălțime: automat; )

Pentru ca totul să funcționeze corect, div-ul trebuie setat la lățime: 100%. Pentru a centra elementul pe verticală, vom folosi tehnici standard prin setarea înălțimii. Funcționează peste tot, inclusiv IE8+.

Aliniere absolută

O solutie foarte interesanta. Ideea este că trebuie să setați înălțimea containerului exterior:

Aliniat absolut (poziție: relativă; înălțime minimă: 500 px; fundal: hsl(200, 100%, 97%); ) .Imagine aliniată în absolut ( lățime: 50%; lățime minimă: 200 px; înălțime: automat; depășire) : auto;

Centrați folosind traducere

O nouă soluție care utilizează transformări CSS. Oferă atât alinierea orizontală, cât și verticală:

Centru ( fundal: hsl(180, 100%, 97%); poziție: relativă; înălțime minimă: 500px; ) .center img (poziție: absolut; sus: 50%; stânga: 50%; transformare: translate(-50) %, -50%) latime: 30%;

Există mai multe dezavantaje:

Proprietatea de transformare CSS necesită prefixe de browser
Nu funcționează în versiunile mai vechi de IE (8 și mai jos)
Containerul exterior trebuie să aibă o înălțime.
Dacă există text în interiorul recipientului, acesta poate fi puțin neclar.

Centrare folosind tipul de afișaj flexibil

Probabil cea mai simplă variantă.

Center ( fundal: hsl(240, 100%, 97%); afișare: flex; justify-content: center; align-items: center; ) .center img ( lățime: 30%; înălțime: automat; )

Nu funcționează în toate versiunile de IE (deși vă puteți proteja folosind în plus display: table-cell). CSS complet:

Center ( fundal: hsl(240, 100%, 97%); afișaj: -webkit-box; /* Safari, iOS 6 și versiuni anterioare; Android, WebKit mai vechi */ afișare: -moz-box; /* Firefox (poate și buggy) */ display: -ms-flexbox /* IE 10 */ display: -webkit-flex /* Chrome 21+ */ display: flex 12.1+, Firefox 22+; -align: center; -justificare-conținut: centru;

Centrare folosind calc

În unele cazuri, această metodă este mai versatilă decât utilizarea flexbox:

Center ( fundal: hsl(300, 100%, 97%); înălțime minimă: 600px; poziție: relativă; ) .center img ( lățime: 40%; înălțime: automat; poziție: absolut; sus:calc(50% -) 20%): calc(50% - 20%);

Este foarte simplu, putem calcula dimensiunile de care avem nevoie în funcție de întregul aspect al paginii. Calculele sunt foarte simple, 50% este punctul central al containerului, dar sarcina noastră este să plasăm colțul din stânga sus al imaginii la aceste coordonate. Apoi, scădeți jumătate din înălțimea și lățimea imaginii. Formula este următoarea:

Top: calc(50% - (40% / 2)); stânga: calc(50% - (40% / 2));

În practică, puteți descoperi că această metodă funcționează bine dacă cunoaștem dimensiunile elementelor:

Imagine centrală ( lățime: 500px; înălțime: 500px; poziție: absolut; sus:calc(50% - (300px / 2)); stânga: calc(50% - (300px - 2)); )

Această metodă este acceptată de Firefox, începând cu versiunea 4, va trebui să înregistrați prefixele browserului. Nu funcționează în IE 8. Cod complet:

Imagine centrală ( lățime: 40%; înălțime: automat; poziție: absolut; sus: -webkit-calc(50% - 20%); stânga: -webkit-calc(50% - 20%); sus: -moz-calc (50% - 20%): -moz-calc(50% - 20%): calc(50% - 20%);

Sper că aceste metode sunt suficiente pentru ca tu să găsești cea mai bună soluție pentru tine.

Câte copii au fost deja sparte despre sarcina de a alinia elemente pe o pagină. Vă aduc în atenție o traducere a unui articol excelent cu o soluție la această problemă de la Stephen Shaw pentru Smashing Magazine - Absolute Horizontal And Vertical Centering In CSS.

Cu toții știam despre margine: 0 auto; pentru centrare orizontală, dar margine: auto; nu a funcționat pentru verticală. Acest lucru poate fi rezolvat cu ușurință prin simpla setare a înălțimii și aplicarea următoarelor stiluri:

Absolut-Center (marja: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )
Nu sunt primul care propune această soluție, dar această abordare este rar folosită pentru alinierea verticală. În comentariile la articolul Cum să centrați orice cu CSS, Simon trimite la un exemplu jsFiddle care oferă o soluție excelentă pentru centrarea verticală. Iată mai multe despre acest subiect.

Să aruncăm o privire mai atentă asupra metodei.

Avantaje

Compatibilitate între browsere (inclusiv IE 8-10)
Fără markup suplimentar, stil minim
Adaptabilitate
Independență față de umplutură (fără dimensiunea cutiei!)
Funcționează pentru imagini

Defecte

Trebuie specificată înălțimea (vezi Înălțimea variabilă)
Este recomandat să setați overflow: automat pentru ca conținutul să nu se răspândească
Nu funcționează pe Windows Phone

Compatibilitate browser Metoda a fost testată și funcționează excelent în Chrome, Firefox, Safari, Mobile Safari și chiar IE 8-10. Un utilizator a menționat că conținutul nu se aliniază vertical pe Windows Phone În interiorul unui container Conținutul plasat într-un container cu poziția: relativă se va alinia bine:

Absolut-Center ( lățime: 50%; înălțime: 50%; preaplin: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

Utilizarea ferestrei de vizualizare Setați conținutul la poziția: fix și setați indexul z:

Absolute-Center.is-Fixed ( lățime: 50%; înălțime: 50%; overflow: automat; margine: automat; poziție: fix; sus: 0; stânga: 0; jos: 0; dreapta: 0; z-index: 999;

Adaptabilitate Principalul avantaj al metodei descrise este că funcționează perfect atunci când înălțimea sau lățimea este specificată ca procent, și chiar înțelegerea min-width/max-width și min-height/max-height.

Absolute-Center.is-Responsive ( lățime: 60%; înălțime: 60%; lățime minimă: 400px; lățime maximă: 500px; umplutură: 40px; overflow: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; dreapta: 0;

Decalaje Dacă site-ul are un antet fix sau trebuie să faceți o altă indentație, trebuie doar să adăugați cod ca top: 70px la stiluri; În timp ce marginea este setată: automat; blocul de conținut va fi centrat corect în înălțime.

De asemenea, puteți alinia conținutul pe partea dorită, lăsând centrarea în înălțime. Pentru a face acest lucru, trebuie să utilizați dreptul: 0; stânga: auto; pentru alinierea la dreapta sau la stânga: 0; dreapta: auto; pentru alinierea la stânga.

Absolute-Center.is-Right ( lățime: 50%; înălțime: 50%; margine: automat; overflow: automat; poziție: absolut; sus: 0; stânga: automat; jos: 0; dreapta: 20px; text-align: dreapta;

O mulțime de conținut Pentru a ne asigura că o cantitate mare de conținut nu permite aspectului să diverge, folosim overflow: auto . Va apărea o bară de defilare verticală. De asemenea, puteți adăuga înălțimea maximă: 100%; dacă conținutul nu are umplutură suplimentară.
.Absolute-Center.is-Overflow ( lățime: 50%; înălțime: 300px; înălțime maximă: 100%; marjă: automat; overflow: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta : 0;

Imagini Această metodă funcționează grozav și pentru imagini! Adăugați înălțimea stilului: automat; apoi imaginea se va scala împreună cu containerul.

Absolute-Center.is-Image ( lățime: 50%; înălțime: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

Înălțime variabilă Metoda descrisă necesită o înălțime de bloc dată, care poate fi specificată ca procent și controlată folosind max-height , ceea ce face ca metoda să fie ideală pentru site-urile receptive. O modalitate de a nu seta înălțimea este să utilizați display: table . În acest caz, blocul de conținut este centrat, indiferent de dimensiune.

Pot exista probleme cu compatibilitatea între browsere, poate că ar trebui să utilizați metoda tabel-celule (descrisă mai jos).

Firefox/IE8: Utilizarea afișajului: tabelul aliniază blocul vertical la partea de sus a documentului.
IE9/10: Folosind afișaj: tabelul aliniază blocul la colțul din stânga sus al paginii.
Mobile Safari: Dacă lățimea este setată la procent, centrarea orizontală are de suferit

.Absolute-Center.is-Variable (afișare: tabel; lățime: 50%; overflow: automat; margine: automat; poziție: absolut; sus: 0; stânga: 0; jos: 0; dreapta: 0; )

Alte metode Metoda descrisă funcționează foarte bine în majoritatea cazurilor, dar există și alte metode care pot fi folosite pentru a rezolva probleme specifice Marja negativă Probabil cea mai populară metodă. Potrivit dacă dimensiunile blocului sunt cunoscute.

Este negativ ( lățime: 300px; înălțime: 200px; umplutură: 20px; poziție: absolut; sus: 50%; stânga: 50%; margine-stânga: -170px; /* (lățime + umplutură)/2 */ margin- sus: -120px /* (înălțime + umplutură)/2 */ )
Avantaje:

Compatibilitate între browsere
Cod minim

Defecte:

Nu adaptiv
Aspectul se strecoară dacă există prea mult conținut în recipient
Trebuie să compensați umplutura sau să utilizați box-sizing: border-box

Utilizarea transform Una dintre cele mai simple metode, acceptă modificări de înălțime. Există un articol detaliat pe acest subiect - „Centrarea elementelor procentuale de lățime/înălțime” din CSS-Tricks.

Este-Transformat ( lățime: 50%; marjă: automat; poziție: absolut; sus: 50%; stânga: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate( -50%,-50%) transforma: translate(-50%,-50%);
Avantaje:

Înălțime variabilă
Cod minim

Defecte:

Nu funcționează în IE 8
Utilizarea prefixelor
Poate interfera cu alte efecte de transformare
În unele cazuri, marginile blocurilor și textul sunt neclare în timpul redării

Table-cell Poate una dintre cele mai bune și mai ușoare moduri. Descris în detaliu în articolul „Centrarea verticală pe înălțime flexibilă cu CSS, dincolo de IE7” de 456bereasttreet. Principalul dezavantaj este marcajul suplimentar: sunt necesare trei elemente:

CSS:
.Pos-Container.is-Table ( display: table; ) .is-Table .Table-Cell ( display: table-cell; vertical-align: middle; ) .is-Table .Center-Block ( lățime: 50%; marja: 0 auto;
Avantaje:

Înălțime variabilă
Aspectul nu funcționează când există o cantitate mare de text într-un bloc
Compatibilitate între browsere

Defecte:

Structură complexă

Flexbox Viitorul CSS, flexbox va rezolva multe dintre problemele de aspect de astăzi. Acest lucru este scris în detaliu într-un articol Smashing Magazine numit Centrarea elementelor cu Flexbox.

Pos-Container.is-Flexbox ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; - moz-box-align: -ms-flex-align: -webkit-align-items: center -ms-flex-pack; : centru; justificare-conținut: centru)
Avantaje:

Conținutul poate avea orice înălțime sau lățime
Poate fi folosit în cazuri mai complexe

Defecte:

Nu există suport pentru IE 8-9
Necesită container sau stiluri în corp
Necesită o mare varietate de prefixe pentru a funcționa corect în browserele moderne
Posibile probleme de performanță

Concluzie Fiecare metodă are avantaje și dezavantaje. În esență, alegerea se reduce la alegerea browserelor care ar trebui să fie acceptate

De la autor: Vă urez bun venit din nou pe paginile blogului nostru. În articolul de astăzi aș dori să vorbesc despre diverse tehnici de aliniere care pot fi aplicate atât la blocuri, cât și la conținutul acestora. În special, cum să aliniați blocurile în css, precum și alinierea textului.

Alinierea blocurilor la centru

În CSS, centrarea unui bloc este ușoară. Aceasta este cea mai cunoscută tehnică pentru mulți, dar aș vrea să vorbesc despre ea chiar acum, în primul rând. Aceasta înseamnă alinierea centrată orizontal în raport cu elementul părinte. Cum se face? Să presupunem că avem un container și subiectul nostru experimental este în el:

< div id = "wrapper" >

< div id = "header" > < / div >

< / div >

Să presupunem că acesta este antetul site-ului. Nu se întinde pe toată lățimea ferestrei și trebuie să o centram. Scriem astfel:

#antet(

latime / max - latime : 800px ;

marja: 0 auto;

Trebuie să specificăm lățimea exactă sau maximă și apoi să notăm proprietatea cheii - margine: 0 auto. Setează marginile exterioare ale antetului nostru, prima valoare determină marginile de sus și de jos, iar a doua determină marginile din dreapta și din stânga. Valoarea auto îi spune browserului să calculeze automat umplutura pe ambele părți, astfel încât elementul să fie exact centrat pe părintele său. Confortabil!

Alinierea textului

Aceasta este, de asemenea, o tehnică foarte simplă. Pentru a alinia toate elementele inline, puteți utiliza proprietatea text-align și valorile acesteia: stânga, dreapta, centru. Acesta din urmă centrează textul, care este ceea ce avem nevoie. Puteți chiar să aliniați o imagine în același mod, deoarece este, de asemenea, un element inline în mod implicit.

Aliniați textul pe verticală

Dar acest lucru este mai complicat. În mod implicit, nu există nicio proprietate simplă, binecunoscută, care să centreze cu ușurință textul pe verticală într-un container bloc. Cu toate acestea, există mai multe tehnici cu care designerii de layout au venit de-a lungul anilor.

Setați înălțimea blocului folosind căptușeală. Modul nu este să setați o înălțime explicită folosind înălțimea, ci să o creați artificial folosind căptușeli în partea de sus și de jos, care ar trebui să fie aceleași. Să creăm orice bloc și să îi scriem următoarele proprietăți:

div( fundal: #ccc; umplutură: 30px 0; )

div(

fundal: #ccc;

umplutură: 30px 0;

Fundalul este doar pentru a arăta vizual marginile, precum și umplutura. Acum, înălțimea blocului este formată din aceste două liniuțe și linia în sine și totul arată astfel:

Definiți înălțimea liniei pentru bloc. Cred că acesta este un mod mai corect dacă trebuie să aliniați o linie de text. Cu acesta, puteți scrie înălțimea conform normalului, folosind proprietatea înălțime. După aceea, trebuie să seteze și înălțimea liniei, la fel ca înălțimea blocului în ansamblu.

div( înălțime: 60px; înălțime linie: 60px; )

div(

înălțime: 60px;

înălțimea liniei: 60px;

Rezultatul va fi similar cu imaginea de mai sus. Totul va funcționa chiar dacă adăugați umplutură. Cu toate acestea, doar pentru o linie. Dacă aveți nevoie de mai mult text în element, atunci această metodă nu va funcționa.

Convertiți un bloc într-o celulă de tabel. Esența acestei metode este că celula tabelului are proprietatea vertical-align: middle, care centrează elementul pe verticală. În consecință, în acest caz, blocul trebuie setat la următoarele:

div( afișare: celulă-tabel; aliniere verticală: mijloc; )

div(

afișare: tabel - celulă;

vertical - aliniere : mijloc ;

Această metodă este bună, deoarece puteți alinia cât de mult text doriți la centru. Dar este mai bine să scrieți display: table în blocul în care este imbricat div-ul nostru, altfel s-ar putea să nu funcționeze.

Ei bine, aici ajungem la ultima tehnică pentru astăzi - aceasta este alinierea verticală a blocurilor în sine. Trebuie spus că, din nou, nu există nicio proprietate care să fie concepută special pentru asta, dar există câteva trucuri de care ar trebui să fii conștient.

Setați indentări ca procent. Dacă cunoașteți înălțimea unui element părinte și plasați un alt element bloc în interiorul acestuia, îl puteți centra folosind umplutura procentuală. De exemplu, părintele are o înălțime de 600 de pixeli. Puneți un bloc în el care are 300 de pixeli înălțime. Cât de mult ai nevoie să dai înapoi în partea de sus și de jos pentru a-l centra? 150 de pixeli fiecare, ceea ce reprezintă 25% din înălțimea părintelui.

Această metodă permite alinierea numai atunci când dimensiunile permit calcule. Și dacă părintele tău are 887 de pixeli înălțime, atunci nu vei putea înregistra nimic cu precizie, acest lucru este deja clar.

Inserați un element într-o celulă de tabel. Din nou, dacă transformăm elementul părinte într-o celulă de tabel, atunci blocul inserat în acesta va fi centrat automat pe verticală. Pentru a face acest lucru, părintele trebuie doar să seteze vertical-align: middle.

Și dacă, pe lângă aceasta, scriem și margine: 0 auto, atunci elementul va deveni centrat orizontal!