Afișați imaginile centrale, textul și elemente de blocare atunci când construiți site-uri web
Dacă învățați cum să construiți site-uri web , unul dintre cele mai comune trucuri pe care va trebui să-l stăpâniți este modul de centralizare a elementelor în fereastra browserului. Aceasta ar putea însemna centrarea unei imagini pe pagină sau ar putea fi un text care să justifice centrele ca titlurile ca parte a proiectului.
Modul potrivit de a realiza acest aspect vizual al imaginilor centrate sau al textului sau chiar al întregii pagini web este prin utilizarea foilor de stil cascadă (CSS) . Cele mai multe proprietăți pentru centrare au fost în CSS de la versiunea 1.0 și funcționează excelent cu browserele web CSS3 și moderne.
Ca multe aspecte ale designului web, există mai multe moduri de a utiliza CSS pentru a centra elemente într-o pagină web. Să aruncăm o privire asupra unor moduri diferite de a utiliza CSS pentru a obține acest aspect vizual.
Privire de ansamblu asupra utilizării CSS pentru elemente de centru în HTML
Centrarea cu CSS poate fi o provocare pentru începătorii de web, deoarece există atât de multe moduri diferite de a realiza acest stil vizual. În timp ce o varietate de metode pot fi dezvoltatori de web frumos sau condimentați, care știu că nu toate tehnicile lucrează pe fiecare element, acest lucru poate fi o provocare teribilă pentru profesioniștii din domeniul web, deoarece o mare varietate de metode înseamnă că trebuie să știe când să folosească ce abordare. Cel mai bun lucru pe care trebuie să-l faceți este să înțelegeți câteva abordări. Pe măsură ce începeți să le folosiți, veți afla ce metodă funcționează cel mai bine în ce instanțe.
La un nivel înalt, puteți utiliza CSS pentru a:
- Text centru
- Centrarea unui element la nivel de bloc (ca o diviziune)
- Centrarea unei imagini
- Centura vertical un bloc sau o imagine
Cu mulți ani în urmă, designerii web ar putea folosi elementul
Centrarea textului cu CSS
Cel mai simplu lucru pe care să-l centrați pe o pagină web este textul. Există doar o proprietate de stil pe care trebuie să o cunoașteți pentru a face acest lucru: text-align. Luați stilul CSS de mai jos, de exemplu:
p.center {text-aliniere: centru; }
Cu această linie de CSS, fiecare paragraf scris cu clasa centrală va fi centrat orizontal în interiorul elementului părinte. De exemplu, dacă paragraful era în interiorul unei divizări, adică era un copil al acelei diviziuni, ar fi centrat orizontal în interiorul
Iată un exemplu de această clasă aplicat în documentul HTML:
Acest text este centrat.
Când centralizați textul cu proprietatea text-align, amintiți-vă că acesta va fi centrat în interiorul elementului său care conține și nu este neapărat centralizat în cadrul întregii pagini. De asemenea, rețineți că textul justificat de centru poate fi dificil de citit pentru blocuri mari de conținut, deci utilizați acest stil cu ușurință. Titlurile și blocurile mici de text, ca textul teaser pentru un articol sau alt conținut, sunt adesea ușor de citit și amendă atunci când sunt centrate, dar blocuri mai mari de text, precum întregul articol în sine, ar fi dificil de consumat dacă conținutul era complet justificate. Amintiți-vă, lizibilitatea este întotdeauna cheia când vine vorba de textul site-ului!
Centrarea blocurilor de conținut cu CSS
Blocurile sunt orice elemente de pe pagina dvs. care au o lățime definită și sunt stabilite ca elemente la nivel de bloc. De multe ori, aceste blocuri sunt create folosind elementul
div.center {
marja: 0 auto;
lățime: 80cm;
}
Această cotitură CSS pentru proprietatea marjei ar stabili margini de sus și de jos la o valoare de 0, în timp ce stânga și dreapta ar folosi "auto". Acest lucru necesită, în esență, orice spațiu disponibil și îl împarte în mod egal între cele două laturi ale ferestrei ferestrei de vizualizare, concentrând în mod efectiv elementul pe pagină.
Aici se aplică în HTML:
dar textul din interior este aliniat.
Atâta timp cât blocul dvs. are o lățime definită, acesta se va centra în interiorul elementului care conține. Textul conținut în acest bloc nu va fi centrat în cadrul acestuia, ci va fi justificat de stânga. Acest lucru se datorează faptului că textul este lăsat justificat în mod prestabilit în browserele web. Dacă v-ați dorit ca și textul să fie centrat, ați putea folosi proprietatea text-align pe care am acoperit-o mai devreme împreună cu această metodă pentru a centra diviziunea.
Centrarea imaginilor cu CSS
În timp ce majoritatea browserelor vor afișa imagini centrate folosind aceeași proprietate de text-align pe care am analizat deja paragraful, nu este o idee bună să se bazeze pe tehnica respectivă, deoarece nu este recomandată de W3C . Deoarece nu este recomandat, există întotdeauna o șansă ca versiunile viitoare ale browserelor să poată alege să ignore această metodă.
În loc să utilizați textul-aliniere pentru a centra o imagine, ar trebui să spuneți în mod explicit browser-ului că imaginea este un element la nivel de bloc. În acest fel, puteți să-l centrați așa cum ați face orice alt bloc. Aici este CSS pentru a face acest lucru se întâmplă:
img.center {
afișare: bloc;
margin-stânga: auto;
margin-dreapta: auto;
}
Și aici este codul HTML care pentru imaginea pe care ne-ar dori să fie centrat:
Puteți, de asemenea, să centrați obiectele utilizând CSS în linie (a se vedea mai jos), dar această abordare NU este recomandată deoarece adaugă stiluri vizuale în marca dvs. HTML. Rețineți că vrem să separăm stilul și structura, adăugând astfel stiluri CSS codului dvs. HTML cu o ruptură a separării și, ca atare, ar trebui evitate ori de câte ori este posibil.
Elementele de centrare verticale cu CSS
Centrarea obiectelor pe verticală a fost întotdeauna o provocare în designul web, dar odată cu lansarea modulului CSS Flexible Box Layout în CSS3, există acum un mod de a face acest lucru.
Alinierea verticală funcționează similar cu alinierea orizontală acoperită mai sus. Proprietatea CSS este aliniată vertical cu valoarea intermediară.
.vcenter {
vertical-aliniere: mijloc;
}
Dezavantajul acestei abordări este că nu toate browserele suportă CSS FlexBox, deși tot mai multe se apropie de această nouă metodă CSS layout! De fapt, toate browserele moderne de astăzi acceptă acum acest stil CSS. Aceasta înseamnă că singurele dvs. preocupări cu Flexbox ar fi o versiune mai veche a browserului.
Dacă aveți probleme cu browsere mai vechi, W3C vă recomandă să centrați textul vertical într-un container utilizând următoarea metodă:
- Așezați elementele care trebuie centrate în interiorul unui element care conține, cum ar fi div.
- Setați o înălțime minimă pe elementul care conține.
- Declarați că elementul care conține elementul este o celulă de tabelă.
- Setați alinierea verticală la "mijloc".
De exemplu, aici este CSS:
.vcenter {
min-înălțime: 12cm;
afișare: celule de masă;
vertical-aliniere: mijloc;
}
Și aici este HTML:
Acest text este centrat pe verticală în casetă.
Centrarea verticală și versiunile mai vechi ale Internet Explorer
Există câteva modalități de a forța Internet Explorer (IE) să se centreze și apoi să folosească comentarii condiționate, astfel încât numai IE vede stilurile, dar ele sunt un pic verbose și urât. Vestea bună este că, odată cu decizia recentă a Microsoft de a renunța la suport pentru versiunile mai vechi ale IE, acele browsere care nu suportă ar trebui să se afle în curând, făcând mai ușor proiectanților web să utilizeze abordări moderne de aspect precum CSS FlexBox care vor face toate aspectul CSS, nu doar centrare, mai ușor pentru toți designerii de web.