Aliniere centru: aspect CSS

Atunci când aspectul paginii este deseori necesaralinierea centrală într-un mod CSS: de exemplu, centrul blocului principal. Există mai multe opțiuni de soluționare a acestei probleme, fiecare dintre acestea, mai devreme sau mai târziu, trebuie să fie folosită de orice tipar.

Aliniați textul la centru

Adesea, în scopuri decorative, trebuie să cerialinierea textului în centru, CSS în acest caz poate reduce timpul de aspect. Anterior, aceasta se făcea folosind atribute HTML, dar acum standardul necesită alinierea textului folosind foile de stil. Spre deosebire de blocurile pentru care trebuie să schimbați marginile exterioare, alinierea textului CSS în centru se realizează folosind o singură linie:

• aliniere text: centru;

Această proprietate este moștenită și transmisă de la părinte.tuturor descendenților. Afectează nu numai textul, dar și alte elemente. Pentru a face acest lucru, acestea trebuie să fie minuscule (de exemplu, span) sau minuscule (orice blocuri care au afișat: setul de proprietăți bloc). Această din urmă opțiune vă permite, de asemenea, să schimbați lățimea și înălțimea elementului, reglați mai flexibil indentarea.

Adesea, pe pagini, alinierea este atribuită tag-ului în sine. Acest lucru face ca codul să fie invalid, deoarece W3C a făcut ca atributul alin să fie învechit. Utilizarea acesteia pe o pagină nu este recomandată.

Alinierea blocului central

Dacă trebuie să setați alinierea div-ului în centru, CSSpoate oferi un mod destul de convenabil: folosind liniuțe externe de marjă. Indentarea poate fi setată atât pe elemente de bloc, cât și pe linii. Valoarea proprietății trebuie să ia valorile 0 (indentare verticală) și auto (indentare orizontală automată):

• marja: 0 auto;

Acum exact această opțiune este absolut recunoscutăvalabil. Utilizarea indentării vă permite, de asemenea, să setați alinierea imaginii în centru: proprietatea marginii CSS vă permite să rezolvați multe probleme asociate poziționării unui element pe pagină.

Aliniere bloc stânga sau dreapta

Uneori, alinierea centrală într-un mod CSS nu esteeste necesar, dar trebuie să puneți două blocuri una lângă alta: unul de la marginea stângă, celălalt de la dreapta. Pentru a face acest lucru, există o proprietate float care poate lua una dintre cele trei valori: stânga, dreapta sau niciuna. Să presupunem că aveți două blocuri care trebuie așezate una lângă alta. Atunci codul va fi astfel:

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

Dacă există și un al treilea bloc, care ar trebui să fie situat sub primele două blocuri (de exemplu, subsol), atunci trebuie să înregistreze proprietatea de ștergere:

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

Cert este că blocurile cu clasele la stânga și la dreaptarenunță la fluxul general, adică toate celelalte elemente ignoră însăși existența elementelor aliniate. Clar: ambele proprietăți permit subsolului sau oricărui alt bloc să vadă elemente care au căzut din flux și interzice să plutească atât în ​​stânga, cât și în dreapta. Prin urmare, în exemplul nostru, subsolul se va muta în jos.

Aliniere verticală

Există momente în care nu este suficient să cerialinierea centrală în moduri CSS, mai trebuie să schimbați poziția verticală a blocului copil. Orice element în linie sau bloc în linie poate fi apăsat pe marginea superioară sau inferioară, situată în mijlocul elementului părinte sau în orice loc. Cel mai adesea, este necesară alinierea blocului în centru, pentru aceasta se folosește atributul vertical-align. Să presupunem că există două blocuri, unul cuibărit în celălalt. În acest caz, blocul intern este un element de linie-bloc (afișare: inline-block). Este necesar să aliniați blocul pentru copii pe verticală:

• aliniere de sus - .child {vertical-align: top};
• aliniere centru - .child {vertical-align: middle};
• aliniere de jos - .child {vertical-align: bottom};

Nici alinierea textului, nici verticala nu afectează elementele de bloc.

Probleme posibile cu blocurile aliniate

Uneori centrarea unui div într-un mod CSSpoate provoca probleme minore. De exemplu, atunci când folosiți float: să zicem că există trei blocuri: .first, .second și .third. Al doilea și al treilea bloc sunt în primul. Un element cu clasa secundă este aliniat la stânga și ultimul bloc este aliniat la dreapta. După nivelare, amândoi au căzut din flux. Dacă elementul părinte nu are o înălțime (de exemplu, 30em), atunci acesta va înceta să se întindă de-a lungul înălțimii blocurilor copilului. Pentru a evita această eroare, utilizați un „spacer” - un bloc special care vede .second și .third. Cod CSS:

• .second {float: left}
• .third {float: right}
• .clearfix {înălțime: 0; clar: ambele;}

Pseudo-clasă frecvent utilizată:after, ceea ce vă permite, de asemenea, să returnați blocurile la loc prin crearea unui pseudo-divizor (în exemplul din div cu containerul clasei, acesta se află în interiorul .first și conține .left și .right):

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

Opțiunile de mai sus sunt cele mai frecvente, deși există mai multe variații. Puteți găsi întotdeauna cel mai simplu și mai convenabil mod de a crea pseudo-eșantioane prin experimentare.

O altă problemă întâlnită deseorimasini de scris, - alinierea elementelor de bloc linie. După fiecare dintre ele, se adaugă automat un spațiu. Proprietatea de marjă, care este setată la o liniuță negativă, ajută să facă față acestei situații. Există alte modalități care sunt utilizate mult mai rar: de exemplu, resetarea dimensiunii fontului. În acest caz, font-size: 0 este specificat în proprietățile elementului părinte. Dacă textul este localizat în interiorul blocurilor, atunci dimensiunea de font dorită este întoarsă deja în proprietățile elementelor de blocuri inline. De exemplu, dimensiunea fontului: 1em. Metoda nu este întotdeauna convenabilă, prin urmare, opțiunea cu indentare este mult mai des folosită.

Alinierea blocurilor vă permite să creați pagini frumoase și funcționale: aceasta este aspectul machetei generale, și locația mărfurilor în magazinele online și fotografii pe un site de cărți de vizită.