Fiecare coder este în mod constant cu care se confruntă cu necesitatea de a alinia conținutul în blocul: orizontal sau vertical. Există unele articole bune pe acest subiect, dar ele oferă o mulțime de opțiuni practice interesante, dar puține, din cauza a ceea ce trebuie să-și petreacă timp suplimentar pentru a evidenția importante. Am decis să prezinte aceste informații într-o formă care este util pentru mine să nu mai google.
Leveling blocuri de dimensiuni cunoscute
Cel mai simplu mod folosind blocuri align CSS a căror înălțime (pentru aliniere verticală) sau lățimea (alinierea orizontală) este cunoscut în prealabil.
Nivelarea cu umplutură
Uneori nu poate să centreze elementul și adăugați-l „padding“ limita de proprietate.
De exemplu, există o imagine de 200 cu 200 pixeli, și doriți să-l centrat în imaginea 240 blocul de la 300. Putem seta înălțimea și lățimea unității externe = 200px, și se adaugă 20 de pixeli din partea de sus și de jos, și 50 de pe stânga și dreapta.
Aliniere blocuri absolut poziționate
Dacă unitatea este setat la „poziția: absolută“, atunci acesta poate fi poziționat în raport cu cel mai apropiat părinte cu „poziția: relativă“. Pentru a face acest lucru, toate proprietățile ( „sus“, „dreapta“, „jos“, „stânga“) a unității interioare pentru a atribui aceeași valoare, precum și „marja: auto“.
aliniere orizontală
Alinierea înseamnă "text-align: center"
Pentru a alinia textul din blocul are o proprietate specială „text-align“. Când este setat la „centru“, fiecare linie de text se va alinia orizontal. Pentru text multilinie această soluție este rar folosit, cele mai multe ori această opțiune poate fi văzută pentru a alinia durata de-s, link-uri sau imagini.
Odată ce am venit cu un text pentru a arăta modul în care nu ar fi avut loc alinierea textului cu ajutorul CSS, dar nimic interesant. În primul rând am decis să copieze undeva în rima pepinieră, dar mi-am amintit că poate strica unicitatea articolului, și dragi cititori nu va fi capabil să-l găsească pe Google. Și apoi m-am decis să scriu acest un paragraf de aici - pentru că esența nu este cu ea, și sunt în aliniere.
Este demn de remarcat faptul că această caracteristică va funcționa nu numai pentru text, dar pentru orice elemente inline ( „display: inline“).
Dar acest text este aliniat la stânga, dar este în blocul, care este aliniat în raport cu centrul învelișului.
Leveling blocuri folosind marja
Elementele de nivel bloc cu o anumită lățime este ușor de aliniat orizontal, dacă le-ați setat la „-marginea din stânga: auto; margin-dreapta: auto“. utilizate în mod obișnuit prescurtare: „margin: 0 auto“ (în loc de zero, poate fi orice valoare). Dar aici, pentru alinierea verticală a unei astfel de metodă nu este adecvată.
Este bine în valoare de Align toate blocurile unde este posibil (care nu necesită o poziționare fixă sau absolută) - este cea mai logică și adecvată. Desi pare evident, dar uneori văzut exemple înfricoșătoare, cu margini negativ, așa că am decis să se clarifice.
aliniere verticală
Cu alinierea verticală este mult mai mult de o problemă - se pare că este în CSS nu a fost furnizată. Există mai multe modalități de a obține rezultatul dorit, dar ele nu sunt foarte interesante.
proprietate Aliniere line-height
În cazul în care blocul este doar o singură linie, este posibil să se realizeze alinierea pe verticală, folosind proprietatea „line-height“ și să-l instalați înălțimea dorită. Pentru a fi sigur, ia în considerare instalarea mai mult și „înălțime“, a căror valoare este egală cu „line-height“, deoarece acesta din urmă nu este acceptată în toate browserele.
Această linie violet, a cărui înălțime este egală cu înălțimea blocului.
Este de asemenea posibil de a realiza blocul de aliniere cu mai multe rânduri. Pentru aceasta este necesar să se utilizeze un flux înveliș suplimentar, și setați înălțimea rândului la el. Unitatea interioară poate fi multi-line, dar asigurați-vă că „inline“. Pentru aceasta este necesar să se aplice „vertical-align: mijloc“.
Acest element inline. Aici sunt câteva portocale
linii. acestea sunt aliniate
din cauza unității înălțimea liniei mamă stabilită.
La învelișurile bloc trebuie să fie instalat „font-size: 0“. Dacă nu setați dimensiunea fontului la zero, browser-ul va adăuga câțiva pixeli în plus. Veți avea, de asemenea, să specificați dimensiunea fontului și înălțimea rândului pentru unitatea interioară, deoarece aceste proprietăți sunt moștenite de la un părinte.
Alinierea în tabelele verticale
Proprietatea „vertical-align“, de asemenea, actioneaza asupra celulelor din tabel. C valoare stabilită „mijloc“, conținutul este centrat în interiorul celulei. Desigur, aspectul tabelar al timpului nostru este considerat a fi arhaic, dar, în cazuri excepționale, poate fi simulat prin specificarea „display: tabel-celulă“.
De obicei, pentru a alinia utilizarea verticală tocmai acest exemplu de realizare. Mai jos este un exemplu de layout-ul, preluate din proiectul deja finalizat. De interes este și anume o imagine care este centrată pe verticală, prin metoda.
