Css center align div orizontal. Center divs și alte subtilități de poziționare

CSS,

HTML

Cred că mulți dintre voi care ați făcut layout au dat peste nevoia de a alinia elementele pe verticală și știți ce dificultăți apar atunci când aliniați un element la centru.

Da, pentru alinierea verticală, CSS are o proprietate specială de aliniere verticală cu mai multe valori. În practică, însă, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.

Să comparăm următoarele abordări. Alinia cu:

• Mese,
• liniuțe,
• inaltimea liniei,
• întindere,
• marja negativa,
• transforma,
• pseudo-element,
• flexbox.

Ca o ilustrare, luați în considerare următorul exemplu.

Există două div-uri, cu una imbricată în cealaltă. Să le dăm clasele corespunzătoare - exterioare și interioare.

Provocarea este de a alinia elementul interior cu centrul elementului exterior.

În primul rând, luați în considerare cazul când dimensiunile unităților exterioare și interioare cunoscut... Să adăugăm display: inline-block la elementul interior și text-align: center și vertical-align: mijloc la cel exterior.

Îmi amintesc că alinierea se aplică numai elementelor care au modul de afișare în linie sau bloc în linie.

Să dăm blocurilor dimensiuni și culori de fundal pentru a le vedea marginile.

Exterior (lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoarea fundalului: #ffc;) .intern (afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoarea fundalului : #fcc;)
După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/

De ce s-a întâmplat? Ideea este că proprietatea de aliniere verticală afectează alinierea. elementul în sine, nu conținutul său(cu excepția cazului în care se aplică celulelor tabelului). Prin urmare, aplicarea acestei proprietăți unui element extern nu a făcut nimic. Mai mult decât atât, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline sunt aliniate vertical în raport cu blocurile adiacente, iar în cazul nostru avem un bloc inline.

Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.

Aliniați-vă cu o masă

Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu o masă cu o singură celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.

http://jsfiddle.net/c1bgfffq/1/

Dezavantajul evident al acestei soluții este că din punctul de vedere al semanticii, este greșit să folosiți tabele pentru aliniere. Al doilea dezavantaj este că pentru a crea tabelul, trebuie să adăugați un alt element în jurul blocului exterior.

Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.

.outer-wrapper (afișare: table;) .outer (afișare: table-cell;)
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.

Aliniați cu indentări

Dacă înălțimile casetelor interioare și exterioare sunt cunoscute, atunci alinierea poate fi setată folosind căptușeala verticală a casetei interioare folosind formula: (H exterior - H interior) / 2.

Exterior (înălțime: 200px;) .interior (înălțime: 100px; margine: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.

Alinierea cu înălțimea liniei

Dacă știți că blocul interior nu trebuie să ocupe mai mult de un rând de text, atunci puteți utiliza proprietatea line-height și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu ar trebui să se încadreze la a doua linie, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.

Exterior (înălțime: 200px; înălțime linie: 200px;) .interior (spațiu alb: nowrap; overflow: ascuns;)
http://jsfiddle.net/c1bgfffq/12/

De asemenea, puteți utiliza această tehnică pentru a alinia textul cu mai multe linii prin redefinirea valorii înălțimii liniei pentru blocul interior și adăugând afișaj: bloc în linie și aliniere verticală: reguli de mijloc.

Exterior (înălțime: 200px; înălțime linie: 200px;) .intern (înălțime linie: normal; afișare: bloc inline; aliniere verticală: mijloc;)
http://jsfiddle.net/c1bgfffq/15/

Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.

Alinierea întindere

Această metodă poate fi utilizată atunci când înălțimea unității exterioare este necunoscută, dar este cunoscută înălțimea unității interioare.

Pentru asta ai nevoie de:

1. setați poziționarea relativă a blocului exterior, iar cea interioară - absolută;
2. adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se întinde pe toată înălțimea blocului exterior;
3. setat la automat pentru umplutura verticală a blocului interior.

.exterior (poziție: relativ;) .interior (înălțime: 100px; poziție: absolut; sus: 0; jos: 0; margine: auto 0;)
http://jsfiddle.net/c1bgfffq/4/

Esența acestei tehnici este că specificarea înălțimii pentru o casetă întinsă și poziționată absolut obligă browserul să calculeze marjele verticale în proporții egale atunci când este setată la automat.

Alinierea cu marginea negativă de sus

Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se aplică atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea blocului interior.

Trebuie să setați poziționarea relativă a blocului exterior, iar cea interioară - absolută. Apoi, trebuie să împingeți cutia interioară în jos jumătate din înălțimea superioară a cutiei exterioare: 50% și să o ridicați la jumătate din propria înălțime margine-sus: -H interioară / 2.

Exterior (poziție: relativ;) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margin-sus: -50px;)
http://jsfiddle.net/c1bgfffq/13/

Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.

Alinierea cu transformarea

Această metodă este similară cu cea anterioară, dar poate fi aplicată atunci când înălțimea unității interioare este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50%.

Exterior (poziție: relativ;) .interior (poziție: absolut; vârf: 50%; transform: translateY (-50%);)
http://jsfiddle.net/c1bgfffq/9/

De ce nu a putut fi setat un procent în metoda anterioară? Deoarece valorile procentuale ale proprietății marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și trebuia să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este potrivită pentru asta.

Dezavantajul acestei metode este că nu poate fi aplicată dacă blocul intern are poziționare absolută.

Aliniați cu Flexbox

Cel mai modern mod de a alinia vertical este utilizarea Flexible Box Layout (cunoscută în mod popular sub numele de Flexbox). Acest modul vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, plasându-le aproape după cum doriți. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.

Caseta exterioară trebuie setată să afișeze: flex, iar caseta interioară trebuie setată la margine: auto. Și e tot! Frumos, nu-i așa?

Exterior (afișare: flex; lățime: 200px; înălțime: 200px;) .intern (lățime: 100px; margine: automat;)
http://jsfiddle.net/c1bgfffq/14/

Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.

Ce modalitate de a alege?

Este necesar să pornim de la enunțul problemei:

• Pentru alinierea verticală a textului, este mai bine să utilizați padding vertical sau proprietatea line-height.
• Pentru elementele poziționate absolut cu o înălțime cunoscută (cum ar fi pictogramele), proprietatea negativă margin-top este ideală.
• Pentru cazuri mai complexe, când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo-element sau proprietatea de transformare.
• Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi de IE, atunci bineînțeles că este mai bine să utilizați Flexbox.

Astăzi, dragă cititor, ne vom ocupa de problema alinierii verticale într-un bloc. div.

Cel mai probabil știți deja despre minunata proprietate CSS vertical-align.Și Dumnezeu însuși ne-a spus să folosim această proprietate pentru alinierea verticală (nu degeaba are un nume atât de explicit).

Formularea problemei: Este necesar să centrați conținutul blocului de înălțime variabilă față de verticală.

Acum să trecem la rezolvarea problemei.

Și așa, avem un bloc, înălțimea lui se poate schimba:

Primul lucru care vă vine în minte este să faceți următorul truc:

Există toate motivele să credem că fraza Blocați conținutul se va alinia la centrul înălțimii containerului div.

Dar nu era acolo! Nu vom obține nicio aliniere centrală așteptată în acest fel. Și de ce? S-ar părea că totul este indicat corect. Se pare că aceasta este captura: proprietatea vertical-align poate fi folosit doar pentru a alinia conținutul celulelor tabelului sau pentru a alinia elemente în linie unul față de celălalt.

În ceea ce privește alinierea în celula tabelului, cred că totul este clar. Voi explica un alt caz cu elemente inline.

Alinierea verticală a elementelor inline

Să presupunem că aveți un șir de text care este împărțit cu etichete inline în părți:

Tu salută bucată text!

O etichetă inline este înțeleasă ca un container, al cărui aspect nu duce la împachetarea conținutului la o nouă linie.

Acțiunea etichetei bloc duce la împachetarea conținutului containerului pe o nouă linie.

Este o etichetă de bloc. Dacă închidem bucăți de text în blocuri

, apoi fiecare dintre ele va apărea pe o nouă linie. Folosind eticheta care, spre deosebire de

, este litere mici, nu va exista ambalare a containerelor la o linie nouă, toate containerele rămâne pe o singură linie.

Container Este convenabil de utilizat atunci când specificați o parte a textului cu formatare specială (evidențierea cu culoare, un font diferit etc.)

Pentru containere aplicați următoarele proprietăți CSS:

#perviy (alinierea verticală: sub;) #vtoroy (alinierea verticală: 3px;) #tretiy (alinierea verticală: -3px;)

Ca rezultat, linia de text va arăta astfel:

Aceasta nu este altceva decât alinierea verticală a elementelor inline și proprietatea CSS vertical-align face față perfect acestei sarcini.

Ne abatem puțin, acum ne întoarcem la sarcina noastră principală.

Aliniere verticală într-un container div

Indiferent, vom folosi proprietatea pentru a ne alinia în interiorul containerului div. vertical-align... După cum am spus deja, această proprietate poate fi folosită în cazul alinierii elementelor inline (am discutat acest caz în detaliu mai sus și nu ne convine pentru alinierea într-un container div); rămâne doar să folosim faptul că vertical-align funcționează pentru celulele de tabel.

Cum putem folosi asta? Nu avem masă, lucrăm cu un container div.

Ha, se dovedește a fi foarte simplu.

proprietate CSS afişa ne permite să transformăm blocul nostru div într-o celulă de tabel, se poate face ușor și natural:

Să avem un div de clasă aliniere text:

Pentru acest bloc, specificați următoarea proprietate CSS:

Textalign (afișare: table-cell;)

Această instrucțiune CSS va transforma în mod miraculos div-ul nostru într-o celulă de tabel, fără a o altera vizual în vreun fel. Și pentru o celulă de tabel, putem aplica proprietatea vertical-align alinierea verticală dorită va funcționa pe deplin.

Totuși, totul nu se poate termina atât de simplu. Avem un browser IE minunat. Nu știe să lucreze cu proprietatea afișare: tabel-celulă(Sugerez să vă familiarizați cu tabelul care ilustrează performanța acestei proprietăți CSS în diferite browsere de pe site-ul web htmlbook.ru). Prin urmare, va trebui să mergem la diverse trucuri.

Există multe modalități de a realiza alinierea într-un container div pentru toate browserele:

• Metodă folosind un cotneyer auxiliar suplimentar
• Metoda folosind expresia. Este asociat cu un calcul inteligent al înălțimii blocurilor. Cunoașterea JavaScript este indispensabilă aici.
• Folosind proprietatea line-height. Această metodă este potrivită numai pentru alinierea verticală într-un bloc de înălțime cunoscută, ceea ce înseamnă că, în general, nu este aplicabilă.
• Utilizarea decalajului de conținut absolut și relativ în cazul browserului IE. Aceasta metoda mi se pare cea mai clara si simpla. De asemenea, este implementabil pentru un container cu înălțime variabilă div. Ne vom opri asupra ei mai detaliat.

După cum înțelegeți, rămâne să rezolvăm problema alinierii verticale în IE, asociată cu înțelegerea greșită a proprietății. afișare: tabel-celulă(nici IE6, nici IE7, nici IE8 nu sunt familiarizați cu această proprietate). Prin urmare, folosind comentariu condiționat special pentru browserele din familia IE, vom specifica alte proprietăți CSS.

Comentariu condiționat

Design tip:

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

se numește comentariu condiționat (ai grijă, forma unui comentariu condiționat trebuie să se potrivească pe deplin cu exemplul dat, până la un spațiu).

Instrucțiunile conținute într-un astfel de comentariu condiționat vor fi executate doar dacă browserul care interpretează acest cod aparține familiei IE.

Astfel, folosind un comentariu condiționat, putem ascunde o bucată de cod din toate browserele, cu excepția IE.

Rezolvarea problemei

Din cauza acestui pătrunjel, va trebui să ne alimentem HTML cu două containere suplimentare. Iată cum va arăta blocul nostru de text:

Pentru clasa container div aliniere text setează proprietăți CSS care își aliniază conținutul vertical pentru toate browserele normale (cu excepția IE, desigur):

Display: tabel-celula; vertical-align: mijloc;

Și încă două proprietăți care stabilesc lățimea și înălțimea blocului:

Latime: 500px; înălțime: 500px;

Acest lucru este suficient pentru a alinia conținutul containerului în centru față de verticală, în toate browserele. cu excepția IE.

Acum începem să adăugăm proprietăți legate de aliniere. pentru browsere din familia IE(pentru ei am folosit blocuri suplimentare divși span):

Referitor la etichetă divîn interiorul unui bloc de clasă aliniere text... Pentru a face acest lucru, trebuie mai întâi să specificați numele clasei și apoi, separate printr-un spațiu, eticheta la care ne referim.

Textalign div (poziție: absolut; sus: 50%;)

O astfel de construcție înseamnă: pentru toate etichetele div din interiorul unui bloc cu clasa aliniere text aplicați proprietățile enumerate.

În consecință, stilurile specificate pentru bloc aliniere text sunt modificate:

Textalign (afișare: tabel-celulă; vertical-align: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă;)

Punctul din stânga sus al casetei de text este acum compensat în jos cu 50%.

Pentru a clarifica ce se întâmplă, am desenat o ilustrație:

După cum puteți vedea din imagine, am făcut unele progrese. Dar asta nu este tot! Punctul din stânga sus al casetei galbene s-a mutat într-adevăr cu 50% în jos față de caseta părinte (violet). Dar avem nevoie de ceva la cincizeci la sută din înălțimea blocului violet centrul blocului galben, nu punctul său din stânga sus.

Acum eticheta va fi folosită spanși poziționarea sa relativă:

Textalign span (poziție: relativă; sus: -50%;)

Astfel, am deplasat blocul galben în sus cu 50% din înălțimea lui, raportat la poziția de pornire. După cum vă puteți imagina, înălțimea casetei galbene este egală cu înălțimea conținutului centrat. Iar ultima operațiune cu containerul span ne-a poziționat conținutul în mijlocul blocului violet. Ura!

Un mic șaman

În primul rând, trebuie să ascundem pătrunjelul din toate browserele normale și să-l deschidem pentru IE. Acest lucru se poate face, desigur, cu ajutorul unui comentariu condiționat, nu degeaba ne-am familiarizat cu el:

Există o mică problemă. Dacă conținutul centrat este prea mare, atunci aceasta duce la consecințe neplăcute: apare înălțimea de defilare verticală suplimentară.

Soluţie: trebuie să adăugați proprietate debordare: ascuns bloc aliniere text.

Cunoașteți proprietatea în detaliu revărsare poate fi în.

Aspectul final al instrucțiunilor de bloc CSS aliniere text se pare ca:

Textalign (afișare: table-cell; vertical-align: middle; lățime: 500px; înălțime: 500px; poziție: relativă; overflow: ascuns; chenar: 1px negru;)

Îmi pare rău, am uitat să menționez un punct important. Daca incerci setați înălțimea blocului de clasă aliniere text ca procent atunci ai nu va ieși nimic din asta.

Centrare în bloc de înălțime variabilă

De foarte multe ori este necesar să setați înălțimea unui bloc de clasă. aliniere text nu în pixeli, ci ca procent din înălțimea blocului părinte și aliniați conținutul containerului div în mijloc.

Problema este că este imposibil să faci acest lucru pentru o celulă de tabel (și până la urmă, blocul de clasă aliniere text se transformă într-o celulă de masă, datorită proprietății afișare: tabel-celulă).

În acest caz, trebuie să utilizați un bloc extern pentru care este specificată proprietatea CSS afisare: tabelși deja pentru ca acesta să stabilească valoarea procentuală a înălțimii. Apoi blocul s-a imbricat în el, cu directiva CSS afișare: tabel-celulă, va moșteni cu plăcere înălțimea blocului părinte.

Pentru a implementa un bloc cu înălțime variabilă în exemplul nostru, vom modifica ușor CSS-ul:

Clasă aliniere text vom modifica valoarea proprietatii afişa Cu tabel-celula pe masași eliminați directiva de aliniere vertical-align: mijloc... Acum putem schimba în siguranță valoarea înălțimii de la 500 de pixeli la, de exemplu, 100%.

Astfel, proprietățile CSS pentru blocul de clasă aliniere text va arata asa:

Textalign (afișare: tabel; lățime: 500px; înălțime: 100%; poziție: relativă; overflow: ascuns; chenar: 1px negru solid;)

Rămâne să implementăm centrarea conținutului. Pentru a face acest lucru, un container div imbricat într-un bloc de clasă aliniere text(acesta este același bloc galben din imagine), trebuie să setați proprietatea CSS afișare: tabel-celulă apoi va moșteni 100% înălțime din blocul părinte aliniere text(bloc violet). Și nimic nu ne împiedică să aliniem conținutul containerului div imbricat în centru cu proprietatea vertical-align: mijloc.

Obținem o altă listă suplimentară de proprietăți CSS pentru div imbricat în container aliniere text.

Textalign div (afișare: table-cell; vertical-align: middle;)

Acesta este tot trucul. Opțional, puteți varia înălțimea cu conținut centrat.

Pentru mai multe informații despre alinierea verticală a unui bloc de înălțime variabilă, consultați.

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. Mai exact cum să aliniați blocurile în css, precum și alinierea textului.

Alinierea blocurilor la centru

În css, alinierea unui bloc la centru este ușoară. Aceasta este cea mai cunoscută tehnică pentru mulți, dar aș vrea să vă povestesc despre ea chiar acum, în primul rând. Se presupune că este centrat orizontal în raport cu elementul părinte. Cum se face? Să presupunem că avem un container și subiectul nostru de testare este în el:

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

Să presupunem că acesta este antetul site-ului. Nu se extinde 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ă scriem proprietatea cheii - margine: 0 auto. Setează marjele pentru antetul nostru, prima valoare este marginile de sus și de jos, iar a doua este marginile din dreapta și din stânga. Valoarea automată îi spune browserului să calculeze automat umplutura pe ambele părți, astfel încât elementul să fie exact în centrul părintelui său. Convenabil!

Alinierea textului

Acesta este, de asemenea, un truc foarte simplu. 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. Chiar și o imagine poate fi aliniată î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 într-un container bloc pe verticală. 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 (fond: #ccc; umplutură: 30px 0;)

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

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

Definiți înălțimea liniei pentru bloc. Mi se pare că acesta este cel mai corect mod dacă trebuie să aliniați o linie de text. Cu acesta, puteți scrie înălțimea într-un mod normal folosind proprietatea înălțime. După aceea, trebuie să seteze î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; linie - înălțime: 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 într-un element, această metodă nu va funcționa.

Convertiți bloc în celulă de tabel. Esența acestei metode este că proprietatea vertical-align: middle acționează asupra celulei tabelului, care centrează elementul vertical. În consecință, în acest caz, blocul trebuie setat după cum urmează:

div (afișare: table-cell; vertical-align: middle;)

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

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

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

Setați indentări în procente. Dacă cunoașteți înălțimea elementului părinte și puneți un alt element bloc în el, atunci îl puteți centra folosind umplutura procentuală. De exemplu, părintele are 600 px înălțime. Puneți un bloc în el care are 300 px înălțime. Cât de mult de sus și de jos aveți nevoie să faceți un pas înapoi pentru a-l centra? 150 de pixeli fiecare, ceea ce reprezintă 25% din înălțimea părintelui.

Această metodă permite centrarea să se facă numai atunci când dimensiunile permit calcule. Și dacă părintele tău are 887 de pixeli înălțime, atunci nu vei putea scrie nimic sigur, acest lucru este de înțeles.

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, mai scriem margine: 0 auto, atunci elementul va fi în centru și pe orizontală!

Aliniați textul vertical în CSS- o muncă foarte dificilă. Am văzut destui oameni care se luptă cu asta și găsesc în mod constant erori „critice” atunci când vine vorba de design responsive real.

Dar nu vă temeți: dacă vă luptați deja cu alinierea verticală CSS, ați ajuns la locul potrivit.

Să vorbim despre proprietatea de aliniere verticală CSS

Când am început să lucrez în domeniul dezvoltării web, am suferit puțin cu această proprietate. M-am gândit că ar trebui să funcționeze ca o proprietate clasică” aliniere text”. Oh, dacă ar fi atât de simplu...

Proprietatea de aliniere verticală CSS funcționează excelent cu tabele, dar nu div-uri sau alte elemente. Când îl utilizați pe un div, acesta va alinia elementul cu alte blocuri, dar nu și cu conținutul său. Proprietatea funcționează numai cu afișare: inline-block; ...

Vezi un exemplu

Vrem să concentrăm conținutul, nu div-ul în sine!

Aveți două opțiuni. Dacă aveți doar div-uri cu text, atunci puteți utiliza proprietatea line-height. Aceasta înseamnă că trebuie să cunoașteți înălțimea elementului, dar nu o puteți seta. În acest fel, textul tău va fi întotdeauna în centru.

Adevărul acestei abordări Alinierea verticală CSS exista un dezavantaj. Dacă textul are mai multe linii, atunci înălțimea liniei va fi înmulțită cu numărul de linii. Sunt șanse, în acest caz, să ajungeți cu o pagină de aspect groaznică.

Aruncă o privire la acest exemplu

Dacă conținutul pe care doriți să îl centrați are mai mult de o linie, atunci div-urile tabelare sunt mai bune. De asemenea, este posibil să folosiți tabele, dar din punct de vedere semantic acest lucru nu este corect. Dacă aveți nevoie de pauze în scopuri receptive, este mai bine să utilizați elemente div.

Pentru ca acest lucru să funcționeze, trebuie să existe un container părinte cu display: table, iar în interiorul acestuia, numărul dorit de coloane pe care doriți să le centrați cu display: table-cell și vertical-align: middle.

Vezi un exemplu

De ce funcționează acest lucru cu marcajul tabelului, dar nu cu elementele div? Pentru că rândurile din tabel au aceeași înălțime. Atunci când conținutul unei celule de tabel nu folosește tot spațiul de înălțime disponibil, browserul adaugă automat padding vertical pentru a centra conținutul.

Proprietatea poziției

Să începem cu elementele de bază ale alinierii verticale a unui div CSS:

• poziție: static este implicit. Elementul este afișat în ordinea HTML;
• poziție: absolută - Folosit pentru a determina poziția exactă a elementului. Această poziție este întotdeauna asociată cu cel mai apropiat părinte poziționat relativ (nu static). Dacă nu determinați poziția exactă a unui element, veți pierde controlul asupra acestuia. Va apărea aleatoriu, ignorând complet fluxul de documente. În mod implicit, articolul este afișat în colțul din stânga sus;
• poziție: relativă - Folosit pentru a poziționa elementul în raport cu poziția sa normală (statică). Această valoare păstrează ordinea fluxului de documente;
• poziție: fixă ​​- Folosit pentru a poziționa elementul în raport cu fereastra browserului, astfel încât să apară întotdeauna în fereastra de vizualizare.

Notă: unele proprietăți ( top și z-index) funcționează numai dacă elementul este setat pe poziție (nu static).

Sa trecem la treaba!

Vrei să faci mișcare Alinierea centrală verticală CSS? Mai întâi, creați un element cu poziție și dimensiuni relative. De exemplu: 100% în lățime și înălțime.

Al doilea pas poate fi diferit în funcție de browserele țintă, dar puteți utiliza una dintre cele două opțiuni:

• Proprietate veche: trebuie să cunoașteți dimensiunea exactă a ferestrei pentru a elimina jumătate din lățime și jumătate din înălțime. Vezi un exemplu;
• Noua proprietate CSS3: puteți adăuga o proprietate de transformare cu o valoare de translație de 50% și blocul va fi întotdeauna în centru. Vezi exemplu.

Practic, dacă doriți să vă centrați conținutul, nu folosiți niciodată top: 40% sau stânga: 300px. Acest lucru funcționează excelent pe ecranele de testare, dar nu este centrat.

Vă amintiți poziția: fixă? Puteți face același lucru cu el ca și cu poziția absolută, dar nu aveți nevoie de o poziție relativă pentru elementul părinte - acesta va fi întotdeauna poziționat relativ la fereastra browserului.

Ați auzit de specificațiile flexbox?

Flexbox poate fi folosit. Este mult mai bună decât orice altă opțiune. aliniați textul CSS centrat vertical... Cu flexbox, gestionarea articolelor este o joacă de copii. Problema este că unele browsere trebuie să fie abandonate ca IE9 și mai jos. Iată un exemplu despre cum să centrați vertical un bloc:

Vezi exemplu

Folosind aspectul flexbox, mai multe casete pot fi centrate.

Dacă aplicați ceea ce ați învățat din aceste exemple, puteți stăpâni Alinierea verticală CSS a unui bloc cât mai repede posibil.

Referințe și lecturi suplimentare

Învățarea de marcare CSS

FlexBox Froggy

Cutia de nisip flexbox

Traducerea articolului „ Aliniere verticală CSS pentru toată lumea (manechine incluse)”A fost pregătit de echipa prietenoasă de proiect.

Cred că mulți dintre voi care ați făcut layout au dat peste nevoia de a alinia elementele pe verticală și știți ce dificultăți apar atunci când aliniați un element la centru.

Da, pentru alinierea verticală, CSS are o proprietate specială de aliniere verticală cu mai multe valori. În practică, însă, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.

Să comparăm următoarele abordări. Alinia cu:

• Mese,
• liniuțe,
• inaltimea liniei,
• întindere,
• marja negativa,
• transforma,
• pseudo-element,
• flexbox.

Ca o ilustrare, luați în considerare următorul exemplu.

Există două div-uri, cu una imbricată în cealaltă. Să le dăm clasele corespunzătoare - exterioare și interioare.

Provocarea este de a alinia elementul interior cu centrul elementului exterior.

În primul rând, luați în considerare cazul când dimensiunile unităților exterioare și interioare cunoscut... Să adăugăm display: inline-block la elementul interior și text-align: center și vertical-align: mijloc la cel exterior.

Îmi amintesc că alinierea se aplică numai elementelor care au modul de afișare în linie sau bloc în linie.

Să dăm blocurilor dimensiuni și culori de fundal pentru a le vedea marginile.

Exterior (lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoarea fundalului: #ffc;) .intern (afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoarea fundalului : #fcc;)
După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/

De ce s-a întâmplat? Ideea este că proprietatea de aliniere verticală afectează alinierea. elementul în sine, nu conținutul său(cu excepția cazului în care se aplică celulelor tabelului). Prin urmare, aplicarea acestei proprietăți unui element extern nu a făcut nimic. Mai mult decât atât, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline sunt aliniate vertical în raport cu blocurile adiacente, iar în cazul nostru avem un bloc inline.

Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.

Aliniați-vă cu o masă

Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu o masă cu o singură celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.

http://jsfiddle.net/c1bgfffq/1/

Dezavantajul evident al acestei soluții este că din punctul de vedere al semanticii, este greșit să folosiți tabele pentru aliniere. Al doilea dezavantaj este că pentru a crea tabelul, trebuie să adăugați un alt element în jurul blocului exterior.

Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.

.outer-wrapper (afișare: table;) .outer (afișare: table-cell;)
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.

Aliniați cu indentări

Dacă înălțimile casetelor interioare și exterioare sunt cunoscute, atunci alinierea poate fi setată folosind căptușeala verticală a casetei interioare folosind formula: (H exterior - H interior) / 2.

Exterior (înălțime: 200px;) .interior (înălțime: 100px; margine: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/

Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.

Alinierea cu înălțimea liniei

Dacă știți că blocul interior nu trebuie să ocupe mai mult de un rând de text, atunci puteți utiliza proprietatea line-height și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu ar trebui să se încadreze la a doua linie, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.

Exterior (înălțime: 200px; înălțime linie: 200px;) .interior (spațiu alb: nowrap; overflow: ascuns;)
http://jsfiddle.net/c1bgfffq/12/

De asemenea, puteți utiliza această tehnică pentru a alinia textul cu mai multe linii prin redefinirea valorii înălțimii liniei pentru blocul interior și adăugând afișaj: bloc în linie și aliniere verticală: reguli de mijloc.

Exterior (înălțime: 200px; înălțime linie: 200px;) .intern (înălțime linie: normal; afișare: bloc inline; aliniere verticală: mijloc;)
http://jsfiddle.net/c1bgfffq/15/

Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.

Alinierea întindere

Această metodă poate fi utilizată atunci când înălțimea unității exterioare este necunoscută, dar este cunoscută înălțimea unității interioare.

Pentru asta ai nevoie de:

1. setați poziționarea relativă a blocului exterior, iar cea interioară - absolută;
2. adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se întinde pe toată înălțimea blocului exterior;
3. setat la automat pentru umplutura verticală a blocului interior.

.exterior (poziție: relativ;) .interior (înălțime: 100px; poziție: absolut; sus: 0; jos: 0; margine: auto 0;)
http://jsfiddle.net/c1bgfffq/4/

Esența acestei tehnici este că specificarea înălțimii pentru o casetă întinsă și poziționată absolut obligă browserul să calculeze marjele verticale în proporții egale atunci când este setată la automat.

Alinierea cu marginea negativă de sus

Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se aplică atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea blocului interior.

Trebuie să setați poziționarea relativă a blocului exterior, iar cea interioară - absolută. Apoi, trebuie să împingeți cutia interioară în jos jumătate din înălțimea superioară a cutiei exterioare: 50% și să o ridicați la jumătate din propria înălțime margine-sus: -H interioară / 2.

Exterior (poziție: relativ;) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margin-sus: -50px;)
http://jsfiddle.net/c1bgfffq/13/

Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.

Alinierea cu transformarea

Această metodă este similară cu cea anterioară, dar poate fi aplicată atunci când înălțimea unității interioare este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50%.

Exterior (poziție: relativ;) .interior (poziție: absolut; vârf: 50%; transform: translateY (-50%);)
http://jsfiddle.net/c1bgfffq/9/

De ce nu a putut fi setat un procent în metoda anterioară? Deoarece valorile procentuale ale proprietății marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și trebuia să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este potrivită pentru asta.

Dezavantajul acestei metode este că nu poate fi aplicată dacă blocul intern are poziționare absolută.

Aliniați cu Flexbox

Cel mai modern mod de a alinia vertical este utilizarea Flexible Box Layout (cunoscută în mod popular sub numele de Flexbox). Acest modul vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, plasându-le aproape după cum doriți. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.

Caseta exterioară trebuie setată să afișeze: flex, iar caseta interioară trebuie setată la margine: auto. Și e tot! Frumos, nu-i așa?

Exterior (afișare: flex; lățime: 200px; înălțime: 200px;) .intern (lățime: 100px; margine: automat;)
http://jsfiddle.net/c1bgfffq/14/

Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.

Ce modalitate de a alege?

Este necesar să pornim de la enunțul problemei:

• Pentru alinierea verticală a textului, este mai bine să utilizați padding vertical sau proprietatea line-height.
• Pentru elementele poziționate absolut cu o înălțime cunoscută (cum ar fi pictogramele), proprietatea negativă margin-top este ideală.
• Pentru cazuri mai complexe, când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo-element sau proprietatea de transformare.
• Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi de IE, atunci bineînțeles că este mai bine să utilizați Flexbox.

Etichete: Adăugați etichete