Aplicați CSS la centru: text și tabel

Lumea informației în orice aproximație este reprezentată de elemente și sisteme de elemente, cuvinte și texte sau în ultima instanță formalizată - texte și tabele. De asemenea, puteți lua în considerare alte structuri de date deja cunoscute , precum și imagini, dar la utilizarea CSS și HTML în formatarea textului, celelalte forme de informații au o relație diferită.

Structura corectă a paginii site-ului implică determinarea poziției fiecărui element. Un document HTML este întotdeauna o secvență de elemente care sunt direct influențate de trei reguli de bază:

• Poziționare absolută;
• Plasați în fluxul general;
• z-index.

Alte opțiuni de cazare au, de asemenea, importanță, necesită o mulțime de cunoștințe pentru a rezolva problema utilizând text centrat pe CSS.

Reguli centrate și de aliniere

Regulile CSS completează documentul HTML, dar fără reguli, acesta din urmă poate gestiona orice fel de aliniere. Proliferarea omniprezentă a dispozitivelor mobile și plecarea designului în direcția simplificării și a "dreptunghiului" face ca întrebarea centrării să fie relevantă, în timp ce alta aliniere pierde adesea valoare.

Elementul principal al paginii este un bloc descris de un anumit stil. Regula de aliniere orizontală: text-align poate accepta, așa cum sa întâmplat deja, doar patru valori (stânga, centru, dreapta, justifica). Puteți efectua alinierea verticală prin combinarea valorilor normelor înălțimii și înălțimii liniei:

{
Înălțime: 88px; // într-un astfel de raport
Înălțimea liniei: 88px; // css în textul centrului - pe verticală
}

Puteți experimenta alte reguli. ; În surse există o mențiune a interpretării blocului prin afișarea regulilor: tabel, afișare: celulă-tabelă și vertical-aliniere: mijloc ; Dar nu întotdeauna funcționează.

Aliniați textul cu tabelele

Singura structură de date care a fost destinată să fie înțeleasă mai întâi și să trăiască pentru totdeauna este tabelul. Oferă aliniere verticală și orizontală, în plus, întrebarea despre modul de plasare a textului centrat în CSS, atunci când folosiți tabele, încetează să mai aibă o valoare complexă.

Practica predominantă de a folosi regulile CSS pentru a atinge un obiectiv în marcarea nu satisface întotdeauna conceptul de foi de stil cascadă. Nimic nu împiedică dezvoltatorul să se centreze în orice direcție prin plasarea conținutului în celula centrală a unei mese cu trei coloane și trei rânduri.

Această soluție nu este standard, dar eficientă. În loc de a rezolva lung și scrupulos problema compatibilității cu browser-ul încrucișat al paginii sau de a număra liniile din stânga, din dreapta, etc., puteți utiliza valorile procentuale ale lățimilor celulelor și înălțimile rândurilor din tabele.

Alinierea cu JavaScript

Întrebarea "Cum se pune textul în centru în HTML " este rezolvată elementar de algoritm în limba browserului și are o execuție mult mai practică și mai eficientă.

Proiectarea fișierelor de stiluri a fost deja difuzată, iar aproape fiecare sistem de management al site-urilor care respectă cu sine oferă stiluri de stil pentru dezvoltatori pentru toate ocaziile. Dar viața necesită întotdeauna anumite specificații: trebuie să ne gândim de fiecare dată cu un șablon curat cum să folosim instrumentele CSS pentru a plasa textul în centru. Opțiunea de aliniere într-un bloc "lipit" în partea laterală a paginii și, prin urmare, schimbarea dimensiunii, este puțin probabil să se potrivească cu un bloc dintr-un meniu pop-up care este construit din elemente diferite.

Centrarea vizibilă nu este întotdeauna doar un bloc în care este cunoscut inițial unde este partea stângă și câți pixeli spre dreapta, unde este partea de sus, și nu garanția că fundul este limita cu care alinierea verticală va fi efectuată.

Există o tendință ca stilul să fie determinat de conținut. Într-o mai mare măsură, site-urile transporta informații vizitatorului, acompaniamentul vizual și sunetul este doar o completare la textul obișnuit. Este vorba de simbolurile care conțin conținutul necesar (acest lucru nu se aplică pe site-uri de artă, picturi, muzică etc.) - este vorba despre informațiile necesare vizitatorului.

Caracteristici de reprezentare a textului și HTML

Sa dovedit că elementul indivizibil al conținutului paginii este textul, nu cuvântul. Semantica este competența dezvoltatorului (proprietarul site-ului). De fapt, textul nu poate fi reprezentat de o singură etichetă, adică o propoziție naturală nu poate fi doar o secvență de simboluri, ci o secvență de etichete care conțin simboluri. Din aceasta rezultă că textul "centralizat" "CSS" poate fi plasat doar în cazuri simple.

Emiterea serverului la cererea browser-ului este foarte voluminoasă și conține o mulțime de elemente care nu sunt întotdeauna relevante pentru ceea ce va fi afișat. Atunci când proiectați un aspect al paginii, este important să plasați corect accentul în partea de prezentare a informațiilor, în special alinierea. Ceva mai bine de făcut pe server, ceva pe client, adică în browser. Nu vă bazați întotdeauna pe regulile CSS, orientarea spre rezultatul final este mult mai practică.