Aliniere centru: aspect CSS

Când se face planificarea paginii, este adesea necesar să se alinieze în centru cu o metodă CSS: de exemplu, centralizați unitatea principală. Există mai multe modalități de a rezolva această problemă, fiecare dintre acestea mai devreme sau mai târziu trebuie să fie utilizat de orice designer de layout.

Aliniați textul la centru

Adesea, în scopuri decorative, trebuie să setați alinierea textului la centru, în acest caz CSS vă permite să reduceți timpul de aspect. Anterior, acest lucru a fost făcut folosind atribute HTML, dar acum standardul necesită alinierea textului utilizând foi de stil. Spre deosebire de blocurile pentru care doriți să schimbați liniuțele externe, în CSS, textul este centrat pe centru folosind o linie:

• text-align: centru;

Această proprietate este moștenită și trecută de la părinte la toți copiii. Afectează nu numai textul, ci și alte elemente. Pentru a face acest lucru, acestea trebuie să fie mici (de exemplu, span) sau block-block (toate blocurile la care este setată proprietatea display: block bloc). Ultima opțiune vă permite, de asemenea, să modificați lățimea și înălțimea elementului, este mai flexibilă pentru a ajusta liniuțele.

Adesea, paginile de aliniere sunt atribuite etichetei în sine. Acest lucru face imediat ca codul să fie invalid, deoarece W3C a recunoscut atributul align ca fiind depășit. Utilizarea lui pe pagină nu este recomandată.

Aliniați blocul la centru

Dacă doriți să setați alinierea divului pe centru, CSS poate oferi o modalitate destul de convenabilă: utilizând marginea marjelor externe. Punctele pot fi atribuite atât elementelor bloc, cât și celor de la rând la bloc. Valoarea proprietății trebuie să fie 0 (verticală) și auto (indentare orizontală):

• marja: 0 auto;

Acum, această opțiune este recunoscută ca fiind absolut valabilă. Utilizarea unor linii exterioare vă permite de asemenea să setați alinierea imaginii în centru: CSS marja de proprietate vă permite să rezolvați multe probleme asociate poziționării unui element pe pagină.

Aliniați blocul la marginea din stânga sau din dreapta

Uneori nu este nevoie să aliniați centrul cu metoda CSS, dar trebuie să puneți două blocuri una lângă cealaltă: una de la marginea din stânga, cealaltă din dreapta. Pentru aceasta, există o proprietate float care poate lua una din cele trei valori: stânga, dreapta sau niciuna. Să presupunem că aveți două blocuri care trebuie așezate una lângă alta. Apoi, codul va fi:

• .stânga {float: left;}
• .dreapta {float: right}

Dacă există și un al treilea bloc, care trebuie localizat sub primele două blocuri (de exemplu, subsolul), trebuie să setați proprietatea clară:

• .stânga {float: left;}
• .dreapta {float: right}
• footer {clar: ambele}

Problema este că blocurile cu clasele stânga și dreapta ies din fluxul general, adică toate celelalte elemente ignoră existența elementelor aliniate. Clar: ambele proprietăți permit ca un subsol sau orice alt bloc să vadă elementele scoase din flux și împiedică flotorul din stânga și din dreapta. Prin urmare, în exemplul nostru, subsolul se va deplasa în jos.

Aliniere verticală

Există momente când nu este suficient să setați alinierea centrului în metodele CSS, dar trebuie să modificați poziția verticală a blocului copil. Orice element de linie sau bloc poate fi apăsat pe marginea superioară sau inferioară, pentru a fi în mijlocul elementului părinte sau pentru a fi într-un loc arbitrar. Cel mai adesea, trebuie să aliniați blocul la centru, utilizând atributul vertical-align. Să presupunem că există două blocuri, una este imbricată în cealaltă. Blocul interior este un element de blocare de linie (afișaj: inline-block). Trebuie să aliniați blocul copil vertical:

• alinierea la marginea superioară - .child {vertical-align: top};
• aliniere centru - .child {vertical-align: middle};
• Aliniere la marginea inferioară - .child {vertical-align: bottom};

Elementele de blocare nu aliniază nici textul, nici aliniază vertical.

Posibile probleme cu blocurile aliniate

Uneori, alinierea divului în jurul centrului cu o metodă CSS poate provoca probleme minore. De exemplu, atunci când utilizați float: de exemplu, există trei blocuri: .first, .cond, andthird. Al doilea și al treilea bloc se află în primul. Un element cu clasa secundă este justificat la stânga, iar ultimul bloc este aliniat la dreapta. După egalizare, ambii au părăsit fluxul. Dacă părintele nu are o înălțime (de exemplu, 30 de metri), atunci nu se va mai întinde de-a lungul înălțimii blocurilor de copii. Pentru a evita această eroare, utilizați "spacer" - un bloc special care vede secundele și secundele. CSS-cod:

• .al doilea {float: left}
• .al treilea {float: right}
• .clarfix {inaltime: 0- clar: ambele-}

pseudo adesea folosit: după, ceea ce permite de asemenea să se întoarcă blocuri în loc prin crearea psevdorasporki (în exemplul din elementul div cu clasă se află în interiorul containerului și cuprinde un .left .first și .right):

• .stânga {float: left}
• .dreapta {float: right}
• .container: după {conținut: `` - afișaj: tabel-clar: ambele-}

Opțiunile de mai sus sunt cele mai frecvente, deși există mai multe variante. Puteți găsi întotdeauna cea mai simplă și convenabilă modalitate de a crea pseudo-împrăștiere prin experimentare.

O altă problemă adesea întâlnită de designerii de layout este alinierea elementelor cutie-linie. După fiecare dintre acestea, se adaugă automat un spațiu. Proprietatea marjei, care este specificată printr-o indentare negativă, ajută la rezolvarea acestei situații. Există și alte metode care sunt folosite mai rar: de exemplu, zeroarea dimensiunea fontului. În acest caz, dimensiunea fontului: 0 este setată în proprietățile elementului părinte. Dacă există text în interiorul blocurilor, atunci dimensiunea fontului este returnată în proprietățile elementelor de bloc. De exemplu, mărimea fontului: 1em. Metoda nu este întotdeauna convenabilă, astfel încât versiunea cu indentări externe este mult mai des utilizată.

Alinierea blocurilor vă permite să creați pagini frumoase și funcționale: acesta este aspectul layout-ului global, localizarea mărfurilor în magazinele online și fotografiile de pe site-ul cărții de vizită.