Există mai multe opțiuni pentru centrarea verticală a obiectelor folosind CSS, dar uneori este dificil să alegeți versiunea potrivită. Vă voi spune despre cele mai bune opțiuni și cum să creați un mic site web centrat.
Nu este atât de ușor de implementat centrarea verticală cu CSS. Există câteva opțiuni care nu pot funcționa în unele browsere. Să examinăm 5 moduri diferite de a efectua centrarea verticală a obiectelor, la cel mai profesionist și detaliat nivel.
Această metodă presupune desemnarea unor div - ca tabel. Prin urmare, putem seta centrarea în atributul vertical-aliniat al tabelului însuși (care funcționează diferit cu diferite elemente).
contra
→ Nu va funcționa în Internet Explorer (chiar și în versiunea 8 beta)
→ Confuzie în etichete (ceea ce nu este atât de rău, dar este o chestiune pur personală)
Această metodă va utiliza poziția absolută (absolută) div, unde indicatorul vârfului va fi egal cu 50%, iar deviația superioară admisă va fi negativă la jumătate din înălțimea conținutului. Aceasta înseamnă că înălțimea obiectului trebuie să aibă un număr fix, care va fi specificat în CSS.
Deoarece înălțimea va fi fixată, probabil că doriți să specificați o depășire automată (auto) pentru conținutul div # 96; a. Dacă conținutul este prea mult, va apărea defilarea, în loc să depășească conținutul div. 96; a.
goodies
→ Va lucra în toate browserele
→ Nu este nevoie să creați confuzii în etichete
contra
→ Dacă spațiul este insuficient, conținutul va fi pierdut. Este ca și cum div este în corpul codului paginii, iar utilizatorul reduce fereastra browserului. Derularea nu apare.
Aplicând această metodă, introducem un div deasupra blocului de conținut. Pentru a face acest lucru, specificăm o înălțime de 50%, iar abaterea admisă a părții inferioare este egală cu scăderea înălțimii conținutului (margin-bottom: -contentheight). Apoi, conținutul va fi afișat de sus și se va încheia în mijloc.
goodies
→ Va lucra în toate browserele
→ Dacă spațiul nu este suficient (adică atunci când fereastra browserului este redusă), conținutul nu va fi tăiat - va apărea derularea.
contra
→ Se poate doar să vă faceți griji cu privire la faptul că această metodă va necesita un element suplimentar gol (care nu este atât de rău, dar aceasta este o chestiune pur personală).
Această metodă utilizează poziția absolută (poziție: absolută); div cu o înălțime și o lățime fixă. Apoi, div va fi dat să se întindă de sus în jos (partea de sus: 0; partea de jos: 0), dar acest lucru este imposibil, deoarece are o înălțime fixă. Prin urmare, setăm marja automată (auto: margine), care va distribui conținutul în centru. Acest lucru este foarte asemănător atunci când toleranța este setată automat la 0 (margine: 0 auto) pentru un bloc de conținut centrat orizontal.
goodies
→ Foarte ușor de implementat
contra
→ Nu va funcționa în Internet Explorer (dar funcționează cu 8 versiuni beta)
→ Dacă spațiul nu este suficient, conținutul va fi tăiat și derularea nu va apărea.
Această metodă va centraliza numai o linie separată de text. Doar specificați înălțimea liniei (înălțime-înălțime) pentru înălțimea obiectului și textul va fi localizat exact în centru.
goodies
→ Funcționează în toate browserele
→ Dacă spațiul nu este suficient, nu se recoltează conținutul
contra
→ Funcționează numai cu text (nu este posibil cu elemente bloc)
→ Încetează în mod incorect dacă utilizați mai mult de o linie (ca atunci când se deplasează o linie)
Această metodă este foarte potrivită pentru elemente mici, de exemplu dacă centralizați textul în interiorul unui buton sau al unui câmp pentru o singură linie de text.
Deci, ce metodă să alegeți?
Opțiunea mea preferată este numărul 3 - utilizarea conținutului plutitor. Această opțiune nu are nici un dezavantaj semnificativ. Deoarece această opțiune oferă ambele avantaje: puteți plasa alte elemente în partea de sus a conținutului, iar atunci când fereastra este redusă, conținutul centrat nu va observa restul elementelor.
Acum știi cum să rezolvi asta. Să începem să creăm un site mic, dar interesant. La sfârșitul lucrării, proiectul dvs. va arăta astfel:
Ar fi frumos să începeți cu marcarea semantică. Iată structura aproximativă a paginii noastre:
#floater
#centred
#side
#logo
#nav
#content
#bottom
Apoi, utilizați codul xhtml:
Acum vom lucra cu foile de stil cascadate (CSS) pentru puțin timp în afara paginii noastre. Puneți acest cod într-un fișier text și dați-i numele stiles.css, pagina noastră va accesa-o printr-o linie specială din codul HTML.
Înainte de a ne defini conținutul pentru a fi centrat pe verticală, corpul din codul de pagină trebuie să fie întins la 100% în înălțime. Deoarece această indicație a înălțimii este în interiorul umplerii și toleranței, pe care le-am dat valoarea zero, ceea ce înseamnă că derularea nu va apărea.
Indicarea abaterii admisibile a fundului obiectului plutitor "margin-bottom" ar trebui să fie jumătate din înălțimea conținutului, care este -200px, dacă înălțimea conținutului este de 400px.
Ar trebui să aveți ceva de genul:
Lățimea elementului "centrat" este de 80%. Acest lucru este pentru site-ul dvs. pentru a fi mici pentru afișaje mici, și mare pentru afișaje mari (pe monitorul meu relativ mare, o mulțime de site-uri vechi arata ca blocuri mici în colțul din stânga sus și este un pic enervant). Acest lucru este mai bine cunoscut sub numele de - marcare plutitoare. Lățimea minimă și maximă (min-lățime / lățime maximă) este, de asemenea, specificată astfel încât site-ul să nu devină prea mare sau prea mic. Deși Internet Explorer nu acceptă aceste atribute. Evident, în locul lor, ar trebui să alegeți o lățime fixă.
Deoarece lățimea elementului "#centered" are o poziție relativă (relativă), putem folosi poziția absolută în interiorul acestuia pentru a aranja elementele. Pentru conținut (#content), a fost utilizat atributul de depășire automată (overflow: auto), astfel încât derularea va apărea dacă conținutul elementului nu se încadrează în acesta. Internet Explorer nu va accepta atributul overflow: auto până când nu specificăm înălțimea (nu numai pozițiile de fund și de vârf și nu în termeni procentuali), așa că vom face așa cum este necesar.
Ultimul lucru pe care trebuie să-l facem este să adăugăm un anumit stil pentru ca pagina noastră să arate puțin mai plăcută. Să începem cu meniul.
Când modificați o listă obișnuită în meniu, ar trebui mai întâi să eliminați marcajele punctului utilizând atributul stil list: niciun atribut și, de asemenea, să eliminați toate indentările și umplerea celulelor. Dacă doriți să utilizați indentare în meniu sau o umplere suplimentară a unei celule, asigurați-vă că ați specificat exact ceea ce aveți nevoie. Nu lăsați acest lucru ca browser implicit, deoarece valorile diferitelor browsere pot fi diferite una de cealaltă.
Următorul lucru care nu trebuie neglijat este indicarea afișării legăturii ca element de blocare. Astfel, ei ocupă întreaga linie complet și vă oferă mult mai mult control. Dacă doriți să faceți meniul orizontal, ar fi mai bine să faceți ca acesta să plutească.
Și ultimul pas va fi aducerea unor adăugiri la CCS, astfel încât pagina noastră să aibă un aspect mai plăcut.
O notă mică despre colțurile rotunjite ale conținutului centrat. CSS3 ar trebui să aibă atributul "border-radius", cu ajutorul căruia puteți specifica raza de rotunjire a colțurilor. Acest lucru nu va fi implementat în browserele principale până când nu utilizați prefixul -moz sau -webkit (pentru Mozilla Firefox sau Safari / Webkit)
Note utile
După cum probabil ați ghicit, Internet Explorer este singurul browser care vă împovărează cu diverse probleme:
* Elementul plutitor ar trebui să fie lățimea specificată, sau nu veți obține nimic în nicio versiune a acestui browser.
* Versiunea a 6-a a acestui browser lasă prea mult spațiu liber în jurul meniului nostru, ceea ce îl distorsionează.