Plasarea elementelor pe o pagină web este esențială pentru designul general. Deși există alte modalități de a influența aspectul, cum ar fi utilizarea tabelelor (pe care nu le recomandăm ), cel mai bine este să utilizați CSS .
Mai jos, vom arunca o privire asupra modului de utilizare a unei proprietăți simple în stil CSS în linie pentru a alinia imagini, tabele, paragrafe și multe altele.
Notă: Aceleași metode pot fi utilizate și pe foi de stil externe, dar deoarece acestea se aplică articolelor individuale și probabil că trebuie să rămână în acest fel, este recomandat să folosiți stilul in-line cum este menționat mai jos.
Aliniați paragrafele de text
Eticheta paragrafului este primul loc pentru a începe în stabilirea paginii dvs. web. Etichetele de deschidere și închidere arată astfel:
Alinierea implicită a textului într-un paragraf este în partea stângă a paginii, însă puteți să vă aliniați paragrafele la dreapta și la centru.
Folosind proprietatea float vă permite să aliniați paragrafele la dreapta sau la stânga elementului părinte. Orice alte elemente din elementul părinte vor curge în jurul elementului plutitor.
Pentru a obține cel mai bun efect cu un paragraf, este mai bine să setați o lățime pe paragraful care este mai mic decât elementul container (părinte).
Aliniați textul din interiorul paragrafelor
În mod evident, alinierea cea mai interesantă pentru textul paragrafului este "justify", care îi spune browserului să afișeze textul aliniat, în esență, atât la partea dreaptă, cât și la cea stângă a ferestrei.
Pentru a justifica textul într-un paragraf, ați folosi proprietatea text-align.
De asemenea, puteți alinia întregul text în interiorul unui paragraf din dreapta sau din stânga (implicit), utilizând proprietatea text-align.
Proprietatea text-align va alinia textul din interiorul elementului. Din punct de vedere tehnic, nu ar trebui să alinieze imaginile care sunt conținute în paragraf sau în alt element, însă majoritatea browserelor tratează imaginile ca fiind inline pentru această proprietate.
Alinierea imaginilor
Folosind proprietatea float pe o etichetă de imagine puteți defini plasarea imaginilor pe pagină și modul în care textul se va înfășura în jurul lor.
La fel ca și paragrafele de mai sus, proprietatea de stil float din eticheta imaginii va poziționa imaginea pe pagină și îi va spune browserului cum să curgă text și alte elemente din jurul imaginii.
Textul urmând eticheta imaginii de mai sus va curge în jurul imaginii spre dreapta, pe măsură ce imaginea va apărea în partea stângă a ecranului.
Dacă vreau ca textul să se oprească în jurul imaginii, folosesc proprietatea clară:
Alinierea mai multor paragrafe
Totuși, dacă doriți să aliniați mai mult decât un paragraf sau o imagine? Ați putea pune pur și simplu o proprietate de stil în fiecare paragraf, dar există o etichetă pe care o puteți utiliza care este mai eficientă:
Simplu înconjurați textul și imaginile (inclusiv etichetele HTML ) cu eticheta și proprietatea de stil (float sau text-align) și totul din acea diviziune va fi aliniat cum vă doriți.
Rețineți că aliniamentele adăugate paragrafelor sau imaginilor din divizie vor fi onorate, înlăturând eticheta.