se potrivesc pe pagina este adesea necesar pentru a face alinierea centru CSS-calea: de exemplu, pentru a centra unitatea principală.Există mai multe soluții la această problemă, fiecare dintre care va avea devreme sau mai târziu să utilizeze orice programator.
Aliniați textul centrat
adesea în scopuri decorative pe care doriți să setați alinierea textului de centru, CSS în acest caz, reduce timpul de impunere.Anterior, acest lucru a fost realizat folosind HTML-atribute, acum standard prevede alinierea textului cu ajutorul foilor de stil.Spre deosebire de blocul pentru care doriți să modificați marginile exterioare, cu alinierea textului CSS în mijloc se face cu o singură linie:
- text-align: center;
Această proprietate este moștenit și a trecut de la mama tuturor copiilor.Ea afectează nu numai textul, ci și de alte elemente.Pentru a face acest lucru, ei trebuie să fie în litere mici (de exemplu, durata) sau o linie-bloc (orice blocuri care stabilește afișajul proprietate: bloc).Această din urmă opțiune, de asemenea, vă permite să schimbați lățimea și înălțimea de configurare mai flexibile de indentare.
Adesea paginile alinia atribut tag-ul în sine.Acest lucru face imediat codul de invalid ca W3C a recunoscut atributului align învechite.Utilizarea sa nu este recomandată pe pagina.
bloc de aliniere la centru
Dacă doriți să specificați alinierea centrul DIV, CSS poate oferi un mod destul de ușor: utilizarea marjei indentare extern.Padding poate fi setat ca un nivel de bloc elemente și de linie de bloc.Svoysva valoare ar trebui să fie setat la 0 (indentat vertical) si auto (liniuță automate orizontale):
- margin: 0 auto;
Acum această opțiune este recunoscut ca absolut valabil.Utilizarea padding extern, de asemenea, vă permite să specificați alinierea la centru: proprietate CSS-marja ne permite pentru a rezolva multe probleme asociate cu elementul de poziționare de pe pagina.Bloc
Aliniați pe marginea stânga sau dreapta
Uneori aliniere centru CSS-modul nu este necesară, dar este necesar pentru a pune două unități de lângă una din partea stângă și celălalt - de pe dreapta.Pentru aceasta proprietate este o float, care poate lua una dintre cele trei valori: stânga, dreapta, sau nici unul.Să presupunem că aveți două unități care trebuie să fie puse împreună.Atunci codul va fi:
- .left {float: left;}
- .right {float: dreapta}
Dacă există un al treilea unitate, care trebuie să fie plasate în primele două blocuri (de exemplu, subsol), eltrebuie să vă înregistrați proprietatea clar:
- .left {float: left;}
- .right {float: dreapta}
- subsol {clar: atât}
fapt că blocurile cu clasele stânga și să cadă direct din totalflux, care este, toate celelalte elemente ignorat însăși existența unor elemente aliniate.Proprietatea clar: atât permite subsolul sau orice altă unitate pentru a vedea scăzut de la elementele de curgere și interzice folie (float) de pe ambele stânga și dreapta.Prin urmare, în exemplul nostru, subsolul se va schimba în jos.Alinierea
verticală
Există cazuri în care aliniere centru set insuficient CSS-moduri, trebuie să modificați în continuare poziția verticală a blocului copilului.Orice element linie sau linie de bloc poate fi apăsat pe marginea de sus sau de jos, situat în mijlocul elementului părinte, sau să fie în orice loc.Necesita mai multe ori aliniere a cutiei în centru, acest atribut este folosit vertical-align.Să presupunem că există două unități, una în interiorul altul.Unitatea interna - element de linie de bloc (display: inline-bloc).Este necesar să se alinieze unitatea copilul vertical: alinierea
- pe limita superioară - .child {vertical-align: top};
- aliniere centru - .child {vertical-align: middle};Aliniere
- la capătul inferior - .child {vertical-align: bottom};
pe elemente de nivel bloc sau text-align, sau vertical-align nu se aplică.
posibile probleme cu unități aliniate
Uneori div aliniați centrul CSS-modul poate cauza probleme minore.De exemplu, folosind float: de exemplu, există trei blocuri: .first, .second și .third.Doua și a treia blocuri sunt în prima.Un element cu o clasă de a doua bloc stanga-aliniat, iar ultima - pe dreapta.După alinierea doi a căzut din curentul.Dacă părintele nu este definit înălțimea (de exemplu, 30em), nu va mai întinde înălțimea de unități subsidiare.Pentru a evita această eroare, utilizați "spacer" - o unitate specială, care vede .second și .third.CSS-code:
- .second {float: left}
- .third {float: dreapta}
- .clearfix {inaltime: 0;clar: atât;}
pseudo des folosite: după, ceea ce permite, de asemenea, să vă mai întoarceți la blocuri în loc de a crea psevdorasporki (în acest exemplu într-un div cu o clasă de container se află în interiorul .first și conține .left și .right):
- .stânga {float: left}
- .right {float: dreapta}
- .container: după {conținut: '';afișare: de masă;clar: atât;}
deasupra opțiuni - cele mai frecvente, cu toate că există unele variații.Puteți găsi întotdeauna cea mai ușoară și mai convenabil mod de a crea psevdorasporki prin experimente.
altă problemă aspect frecvent întâlnit - alinierea elementelor de linie de bloc.După fiecare dintre ele spațiu adăugat automat.Pentru a face față cu această marjă de ajutor proprietate, care este definit de indentare negativ.Exista si alte metode care sunt folosite mai puțin frecvent, de exemplu, resetarea dimensiunea fontului.În acest caz, proprietățile părinte prescris font-size: 0.Dacă află în blocuri de text, proprietățile elementelor de linie de bloc s-au întors la dimensiunea dorită.De exemplu, font-size: 1em.Metoda nu este întotdeauna convenabil, opțiunea cu margini externe folosit atât de mult mai frecvent.Bloc de aliniere
vă permite să creați frumoase și funcționale aspect de pagină și este aspectul general și localizarea bunurilor în magazine, și fotografiile pe un site mic.
