Centrat: CSS layout-

În cazul în care aspectul paginii este adesea necesară pentru a face un CSS-centrat mod: de exemplu, pentru a centra unitatea principală. Există mai multe soluții la această problemă, fiecare dintre care va avea, mai devreme sau mai târziu, de a utiliza orice codor.

Alinierea textului la centru

De multe ori în scopuri decorative pe care doriți să setați textul centrat, CSS, în acest caz, pentru a reduce timpul de impunere. Anterior, acest lucru a fost realizat folosind HTML-atribute, dar acum standardul necesar pentru a alinia textul cu foaia de stil. Spre deosebire de blocul pentru care doriți să modificați capitonarea extern în alinierea CSS de text în mijloc se face cu o singură linie:

• text-align: center;

Această proprietate este moștenită și a trecut de la mamă la toți copiii. Ea afectează nu numai textul, ci și la alte elemente. În acest scop, acestea ar trebui să fie litere mici (de exemplu, durata) sau a unui rând-bloc (orice blocuri care specifică proprietatea de afișare: bloc). Această din urmă opțiune, de asemenea, vă permite să modificați lățimea și înălțimea elementului, mai flexibilă configurația decupării.

Paginile alinia de multe ori atribut tag-ul însuși. Acest lucru face imediat codul nevalid, deoarece W3C a recunoscut atributul align învechit. Nu se recomandă utilizarea acestuia pe o pagină.

bloc Centrat

Dacă doriți să setați alinierea div în mijloc, CSS poate oferi destul de un mod confortabil: utilizarea marjei de umplutură externe. Căptușeala poate fi specificat ca elementele blocului, și linia de bloc. Valoarea Svoysva trebuie să fie 0 (padding verticală) și auto (scobitură automată pe orizontală):

• margin: 0 auto;

Acum, această opțiune este recunoscută ca fiind absolut valabile. Utilizarea padding externă, de asemenea, vă permite să setați alinierea centrului: proprietate CSS-marja ne permite să rezolve multe probleme asociate cu elementul de poziționare pe pagină.

Alinierea la marginea din stânga sau din dreapta a blocului

Uneori, CSS-un fel nu necesită alinierea centrului, dar este necesar pentru a pune următoarele două blocuri, unul de pe partea stângă, iar celălalt - din partea dreaptă. Pentru aceasta este proprietatea float, care poate lua una dintre următoarele trei valori: stânga, dreapta sau nici unul. Să presupunem că aveți două blocuri care ar trebui să fie plasate una lângă alta. Apoi, codul este după cum urmează:

• .left {float: left;}
• .right {float: right}

Dacă există un bloc al treilea, care trebuie să fie amplasate în primele două blocuri (de exemplu, subsol), atunci este necesar să se înregistreze caracteristica clară:

• .left {float: left;}
• .right {float: right}
• subsol {clar: ambele}

Faptul că blocurile cu clasele de toamna stânga și dreapta din debitul total, adică, toate celelalte elemente ignorate însăși existența unor elemente aliniate. Proprietatea clară: ambele permite blocului de subsol sau orice alt vizibil precipitat din celulele de curgere și interzice folie (float) de pe stânga și pe dreapta. De aceea, în exemplul nostru, subsolul este deplasat în jos.

aliniere verticală

Există cazuri în care nu este suficient pentru a seta alinierea centrului de CSS-moduri, trebuie să modificați, de asemenea, poziția verticală a blocului pentru copii. Orice element de linie sau rând blocului poate fi presat de marginea superioară sau inferioară, situată în mijlocul elementului părinte sau să fie într-o locație arbitrară. Cel mai adesea necesită alinierea centrului blocului, folosește atributul vertical-align. Să presupunem că există două blocuri, unul imbricate în celălalt. În această unitate interioară - elementul rând bloc (display: inline-block). Este necesar să se alinieze copilul blocului vertical:

• alinierea limita superioară - .child {vertical-align: top};
• centrat - .child {vertical-align: middle};
• alinierea marginii inferioare - .child {vertical-align: bottom};

La elemente ale blocului audio text-align, sau vertical-align nu se aplică.

Posibile probleme cu unități aliniate

Uneori div care aliniază centrul CSS-modul în care poate provoca o mică problemă. De exemplu, atunci când se utilizează un float: de exemplu, există trei blocuri: .first, .second și .third. A doua și a treia blocuri se află în prima. Un element cu o clasă de a doua aliniat la stânga, iar ultimul bloc - pe dreapta. După alinierea celor doi a scăzut din fluxul. În cazul în care elementul părinte nu este înălțimea definită (de exemplu, 30em), va înceta să se întindă înălțimea unităților subsidiare. Pentru a evita această eroare, utilizați „distanțare“ - o unitate specială, care vede .second și .third. CSS-cod:

• .second {float: left}
• .third {float: right}
• .clearfix {înălțime: 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):

• .left {float: left}
• .right {float: right}
• .container: după {content: ''; afișare: tabel; clar: ambele;}

Cele de mai sus opțiuni - cea mai frecventă, deși există unele variații. Puteți găsi întotdeauna cel mai ușor și mai convenabil mod de a crea psevdorasporki de experimente.

O altă problemă des întâlnită aspect - alinierea elementelor liniei bloc. După fiecare dintre ele un spațiu este adăugat automat. Manipulați ajută proprietatea marjă, care este definită de indentare negativă. Există și alte modalități, care sunt utilizate mai puțin frecvent, de exemplu, resetați dimensiunea fontului. În acest caz, proprietățile elementului părinte înregistrează font-size: 0. Dacă situate în blocuri de text, proprietățile elementelor de linie de bloc au revenit la dimensiunea fontului dorit. De exemplu, font-size: 1em. Metoda nu este întotdeauna convenabil, de aceea este folosit mult mai frecvent versiune cu margini externe.

Alinierea Blocuri vă permite să creați pagini frumoase și funcționale: dispunerea generală și aspectul, precum și amplasarea mărfurilor în magazine, iar fotografiile de pe site-ul unui mic.