Cred că mulți dintre voi care ați avut de-a face cu aspectul ați întâmpinat nevoia de a alinia elementele pe verticală și de a cunoaște dificultățile care apar la alinierea unui element la centru.
Da, există o proprietate specială de aliniere verticală cu mai multe valori în CSS pentru alinierea verticală. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.
Să comparăm următoarele abordări. Aliniați folosind:
- mese,
- indentare,
- înălțimea liniei
- întindere,
- marja negativa,
- transforma
- pseudo element
- flexbox.
Sunt două element div, cu unul dintre ele imbricat în celălalt. Să le dăm clasele corespunzătoare - exterioare și interioare.
Provocarea este de a alinia elementul interior cu centrul elementului exterior.
În primul rând, să luăm în considerare cazul când dimensiunile blocurilor externe și interne cunoscut. Să adăugăm afișarea regulii: bloc inline la elementul interior și text-align: centru și vertical-align: mijloc la elementul exterior.
Rețineți că alinierea se aplică numai elementelor care au un mod de afișare în linie sau în bloc.
Să setăm dimensiunile blocurilor, precum și culorile de fundal, astfel încât să le vedem marginile.
Exterior ( lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoarea fundalului: #ffc; ) .intern ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoarea fundalului : #fcc )
După aplicarea stilurilor vom vedea că unitate interioară aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/
De ce sa întâmplat asta? Chestia este că proprietatea de aliniere verticală afectează alinierea elementul în sine, nu conținutul său(cu excepția cazului în care este aplicat celulelor tabelului). Prin urmare, aplicarea acestei proprietăți la element exterior nu a dat nimic. Mai mult, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline sunt aliniate vertical față de blocurile adiacente, iar în cazul nostru avem un bloc inline.
Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.
Alinierea folosind un tabel
Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu un tabel dintr-o celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.
http://jsfiddle.net/c1bgfffq/1/
Dezavantajul evident al acestei soluții este că, din punct de vedere semantic, este incorect folosirea tabelelor pentru aliniere. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.
Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.
Alinierea folosind indentări
Dacă înălțimile blocurilor interioare și exterioare sunt cunoscute, atunci alinierea poate fi stabilită folosind indentările verticale ale blocului interior folosind formula: (H exterior – H interior) / 2.Exterior ( înălțime: 200px; ) .interior (înălțime: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.
Alinierea folosind înălțimea liniei
Dacă știți că blocul interior nu trebuie să ocupe mai mult de un rând de text, atunci puteți utiliza proprietatea line-height și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu trebuie să se încadreze la a doua linie, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( spațiu alb: nowrap; overflow: ascuns; )
http://jsfiddle.net/c1bgfffq/12/
Această tehnică poate fi, de asemenea, utilizată pentru a alinia textul cu mai multe linii dacă redefiniți valoarea înălțimii liniei pentru blocul interior și, de asemenea, adăugați afișarea: inline-block și vertical-align: reguli de mijloc.
Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( înălțime linie: normal; afișare: bloc în linie; aliniere verticală: mijloc; )
http://jsfiddle.net/c1bgfffq/15/
Minus această metodă este că trebuie cunoscută înălțimea blocului exterior.
Alinierea folosind „stretch”
Această metodă poate fi utilizată atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea blocului intern.Pentru a face acest lucru aveți nevoie de:
- setați poziționarea relativă față de blocul extern și poziționarea absolută față de blocul intern;
- adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
- setați umplutura verticală a blocului interior la automat.
http://jsfiddle.net/c1bgfffq/4/
Ideea din spatele acestei tehnici este că setarea unei înălțimi pentru un bloc întins și poziționat absolut face ca browserul să calculeze umplutura verticală într-un raport egal dacă este setat la automat.
Aliniere cu marginea negativă-sus
Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se folosește atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.Trebuie să setați blocul extern la poziționare relativă, iar blocul intern la poziționare absolută. Apoi, trebuie să mutați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și să-l ridicați cu jumătate de înălțime margine-top: -H interior / 2.
Exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margin-sus: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.
Alinierea cu transformarea
Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea unității interioare este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50% .Exterior ( poziție: relativ; ) .intern ( poziție: absolut; sus: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
De ce a fost imposibil să setați valoarea ca procent în metoda anterioară? Deoarece valorile procentuale ale marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și ar trebui să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este perfectă pentru aceasta.
Dezavantajul acestei metode este că nu poate fi folosită dacă unitatea interioară are poziționare absolută.
Aliniere cu Flexbox
Cele mai multe mod modern alinierea verticală este de a utiliza Flexible Box Layout (cunoscut în mod popular sub numele de Flexbox). Acest modul vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, aranjandu-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.Blocul exterior trebuie setat să afișeze: flex și blocul interior la margine: auto . Și asta-i tot! Frumos, nu-i așa?
Exterior ( afișaj: flex; lățime: 200 px; înălțime: 200 px; ) . interior ( lățime: 100 px; margine: automat; )
http://jsfiddle.net/c1bgfffq/14/
Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.
Ce metodă ar trebui să aleg?
Trebuie să începeți de la declarația problemei:- Pentru a alinia textul pe verticală, este mai bine să utilizați indentări verticale sau proprietatea line-height.
- Pentru elementele poziționate absolut cu o înălțime cunoscută (de exemplu, pictograme), metoda cu o proprietate negativă margin-top este ideală.
- Pentru mai mult cazuri complexe Când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo element sau proprietatea de transformare.
- Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi ale browserului IE, atunci, desigur, este mai bine să utilizați Flexbox.
Cred că mulți dintre voi care ați avut de-a face cu aspectul ați întâmpinat nevoia de a alinia elementele pe verticală și de a cunoaște dificultățile care apar la alinierea unui element la centru.
Da, există o proprietate specială de aliniere verticală cu mai multe valori în CSS pentru alinierea verticală. Cu toate acestea, în practică, nu funcționează deloc așa cum era de așteptat. Să încercăm să ne dăm seama.
Să comparăm următoarele abordări. Aliniați folosind:
- mese,
- indentare,
- înălțimea liniei
- întindere,
- marja negativa,
- transforma
- pseudo element
- flexbox.
Există două elemente div, unul dintre ele imbricat în celălalt. Să le dăm clasele corespunzătoare - exterioare și interioare.
Provocarea este de a alinia elementul interior cu centrul elementului exterior.
În primul rând, să luăm în considerare cazul când dimensiunile blocurilor externe și interne cunoscut. Să adăugăm afișarea regulii: bloc inline la elementul interior și text-align: centru și vertical-align: mijloc la elementul exterior.
Rețineți că alinierea se aplică numai elementelor care au un mod de afișare în linie sau în bloc.
Să setăm dimensiunile blocurilor, precum și culorile de fundal, astfel încât să le vedem marginile.
Exterior ( lățime: 200 px; înălțime: 200 px; aliniere text: centru; aliniere verticală: mijloc; culoarea fundalului: #ffc; ) .intern ( afișare: bloc inline; lățime: 100 px; înălțime: 100 px; culoarea fundalului : #fcc )
După aplicarea stilurilor, vom vedea că blocul interior este aliniat orizontal, dar nu vertical:
http://jsfiddle.net/c1bgfffq/
De ce sa întâmplat asta? Chestia este că proprietatea de aliniere verticală afectează alinierea elementul în sine, nu conținutul său(cu excepția cazului în care este aplicat celulelor tabelului). Prin urmare, aplicarea acestei proprietăți elementului exterior nu a produs nimic. Mai mult, aplicarea acestei proprietăți unui element interior nu va face nimic, deoarece blocurile inline sunt aliniate vertical față de blocurile adiacente, iar în cazul nostru avem un bloc inline.
Există mai multe tehnici pentru a rezolva această problemă. Mai jos vom arunca o privire mai atentă asupra fiecăruia dintre ele.
Alinierea folosind un tabel
Prima soluție care îmi vine în minte este înlocuirea blocului exterior cu un tabel dintr-o celulă. În acest caz, alinierea va fi aplicată conținutului celulei, adică blocului interior.
http://jsfiddle.net/c1bgfffq/1/
Dezavantajul evident al acestei soluții este că, din punct de vedere semantic, este incorect folosirea tabelelor pentru aliniere. Al doilea dezavantaj este că crearea unui tabel necesită adăugarea unui alt element în jurul blocului exterior.
Primul minus poate fi eliminat parțial prin înlocuirea etichetelor table și td cu div și setarea modului de afișare a tabelului în CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Cu toate acestea, blocul exterior va rămâne în continuare un tabel cu toate consecințele care decurg.
Alinierea folosind indentări
Dacă înălțimile blocurilor interioare și exterioare sunt cunoscute, atunci alinierea poate fi stabilită folosind indentările verticale ale blocului interior folosind formula: (H exterior – H interior) / 2.Exterior ( înălțime: 200px; ) .interior (înălțime: 100px; margine: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Dezavantajul soluției este că este aplicabilă doar într-un număr limitat de cazuri când se cunosc înălțimile ambelor blocuri.
Alinierea folosind înălțimea liniei
Dacă știți că blocul interior nu trebuie să ocupe mai mult de un rând de text, atunci puteți utiliza proprietatea line-height și o puteți seta egală cu înălțimea blocului exterior. Deoarece conținutul blocului interior nu trebuie să se încadreze la a doua linie, se recomandă să adăugați și spațiul alb: nowrap și overflow: reguli ascunse.Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( spațiu alb: nowrap; overflow: ascuns; )
http://jsfiddle.net/c1bgfffq/12/
Această tehnică poate fi, de asemenea, utilizată pentru a alinia textul cu mai multe linii dacă redefiniți valoarea înălțimii liniei pentru blocul interior și, de asemenea, adăugați afișarea: inline-block și vertical-align: reguli de mijloc.
Exterior ( înălțime: 200 px; înălțime linie: 200 px; ) . interior ( înălțime linie: normal; afișare: bloc în linie; aliniere verticală: mijloc; )
http://jsfiddle.net/c1bgfffq/15/
Dezavantajul acestei metode este că trebuie cunoscută înălțimea blocului exterior.
Alinierea folosind „stretch”
Această metodă poate fi utilizată atunci când înălțimea blocului extern este necunoscută, dar este cunoscută înălțimea blocului intern.Pentru a face acest lucru aveți nevoie de:
- setați poziționarea relativă față de blocul extern și poziționarea absolută față de blocul intern;
- adăugați regulile de sus: 0 și de jos: 0 la blocul interior, drept urmare se va întinde pe toată înălțimea blocului exterior;
- setați umplutura verticală a blocului interior la automat.
http://jsfiddle.net/c1bgfffq/4/
Ideea din spatele acestei tehnici este că setarea unei înălțimi pentru un bloc întins și poziționat absolut face ca browserul să calculeze umplutura verticală într-un raport egal dacă este setat la automat.
Aliniere cu marginea negativă-sus
Această metodă a devenit cunoscută pe scară largă și este folosită foarte des. Ca și precedentul, se folosește atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.Trebuie să setați blocul extern la poziționare relativă, iar blocul intern la poziționare absolută. Apoi, trebuie să mutați blocul interior în jos cu jumătate din înălțimea superioară a blocului exterior: 50% și să-l ridicați cu jumătate de înălțime margine-top: -H interior / 2.
Exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 50%; margin-sus: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.
Alinierea cu transformarea
Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea unității interioare este necunoscută. În acest caz, în loc să setați o umplutură negativă de pixeli, puteți utiliza proprietatea de transformare și puteți muta blocul interior în sus folosind funcția translateY și o valoare de -50% .Exterior ( poziție: relativ; ) .intern ( poziție: absolut; sus: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
De ce a fost imposibil să setați valoarea ca procent în metoda anterioară? Deoarece valorile procentuale ale marjei sunt calculate în raport cu elementul părinte, o valoare de 50% ar fi jumătate din înălțimea cutiei exterioare și ar trebui să ridicăm cutia interioară la jumătate din înălțimea proprie. Proprietatea de transformare este perfectă pentru aceasta.
Dezavantajul acestei metode este că nu poate fi folosită dacă unitatea interioară are poziționare absolută.
Aliniere cu Flexbox
Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (cunoscută în mod popular sub numele de Flexbox). Acest modul vă permite să controlați în mod flexibil poziționarea elementelor pe pagină, aranjandu-le aproape oriunde. Alinierea la centru pentru Flexbox este o sarcină foarte simplă.Blocul exterior trebuie setat să afișeze: flex și blocul interior la margine: auto . Și asta-i tot! Frumos, nu-i așa?
Exterior ( afișaj: flex; lățime: 200 px; înălțime: 200 px; ) . interior ( lățime: 100 px; margine: automat; )
http://jsfiddle.net/c1bgfffq/14/
Dezavantajul acestei metode este că Flexbox este acceptat doar de browserele moderne.
Ce metodă ar trebui să aleg?
Trebuie să începeți de la declarația problemei:- Pentru a alinia textul pe verticală, este mai bine să utilizați indentări verticale sau proprietatea line-height.
- Pentru elementele poziționate absolut cu o înălțime cunoscută (de exemplu, pictograme), metoda cu o proprietate negativă margin-top este ideală.
- Pentru cazuri mai complexe, când înălțimea blocului este necunoscută, trebuie să utilizați un pseudo element sau proprietatea transform.
- Ei bine, dacă sunteți atât de norocos încât nu aveți nevoie să susțineți versiuni mai vechi ale browserului IE, atunci, desigur, este mai bine să utilizați Flexbox.
Etichete: Adăugați etichete
Alinierea elementelor pe orizontală și pe verticală se poate face în diverse moduri. Alegerea metodei depinde de tipul elementului (bloc sau inline), tipul poziționării acestuia, dimensiunea etc.
1. Alinierea orizontală la centrul blocului/paginii
1.1. Dacă este specificată lățimea blocului:
div ( lățime: 300 px; margine: 0 automat; /*centrează elementul orizontal în blocul părinte*/ )Dacă doriți să aliniați un element inline în acest fel, acesta trebuie să fie setat să afișeze: bloc;
1.2. Dacă un bloc este imbricat în interiorul altui bloc și lățimea acestuia nu este specificată/specificată:
1.3. Dacă blocul are o lățime și trebuie să fie centrat pe blocul părinte:
1.4. Dacă blocurile nu au o lățime specificată, le puteți centra folosind un bloc de înveliș părinte:
2. Alinierea verticală
2.1. Dacă textul ocupă un rând, de exemplu, pentru butoane și elemente de meniu:
.button (înălțime: 50px; înălțime linie: 50px; )2.2. Pentru a alinia vertical un bloc într-un bloc părinte:
2.3. Alinierea verticală după tipul tabelului:
2.4. Dacă un bloc are o lățime și o înălțime date și trebuie să fie centrat pe blocul său părinte:
2.5. Poziționare absolută în centrul paginii/blocului folosind transformarea CSS3:
dacă sunt specificate dimensiuni pentru element
div ( width: 300px; /*setează lățimea blocului*/ height:100px; /*setează înălțimea blocului*/ transform: translate(-50%, -50%); poziție: absolut; top: 50 %; stânga: 50% ;
dacă elementul nu are dimensiuni și nu este gol
Un text aici
Există mai multe moduri fundamental diferite de a centra un obiect pe verticală folosind CSS, dar alegerea celui potrivit poate fi dificilă. Ne vom uita la unele dintre ele și, de asemenea, vom face un mic site web folosind cunoștințele acumulate.
Alinierea pe centru vertical nu este ușor de realizat folosind CSS. Există multe moduri și nu toate funcționează în toate browserele. Să ne uităm la 5 diverse metode, precum și avantajele și dezavantajele fiecăruia dintre ele. Exemplu.
1a metoda
Această metodă presupune că setăm un element
Pro
- Conținutul se poate schimba dinamic înălțimea (înălțimea nu este definită în CSS).
- Conținutul nu este întrerupt dacă nu există spațiu suficient pentru el.
Contra
- Nu funcționează în IE 7 sau mai puțin
- O mulțime de etichete imbricate
a 2-a metoda
Această metodă folosește poziționarea absolută a div-ului, cu partea superioară setată la 50% și margine-top minus jumătate din înălțimea conținutului. Aceasta implică faptul că obiectul trebuie să aibă o înălțime fixă, care este definită în stilurile CSS.
Deoarece înălțimea este fixă, puteți seta overflow:auto; pentru un div care conține conținut, astfel, dacă conținutul nu se potrivește, vor apărea bare de defilare.
Pro
- Funcționează în toate browserele.
- Nu există cuibări inutile.
Contra
- Când nu este suficient spațiu, conținutul dispare (de exemplu, div-ul este în interiorul corpului și utilizatorul a făcut ferestrele mai mici, caz în care barele de defilare nu vor apărea.
a 3-a metoda
În această metodă, vom încheia conținutul div cu un alt div. Să-i setăm înălțimea la 50% (înălțime: 50%;) și marginea de jos la jumătate din înălțime (margin-bottom:-contentheight;). Conținutul va pluti și va fi centrat.
Pro
- Funcționează în toate browserele.
- Când nu există suficient spațiu (de exemplu, când fereastra este redusă), conținutul nu este decupat, vor apărea bare de defilare.
Contra
- Nu mă pot gândi decât la un singur lucru: că se folosește un element gol suplimentar.
Metoda a 4-a.
Această metodă utilizează proprietatea position:absolute; pentru un div cu dimensiuni fixe (lățime și înălțime). Apoi îi setăm coordonatele de sus:0; jos:0; , dar din moment ce are o înălțime fixă, nu se poate întinde și este aliniată la centru. Aceasta este foarte asemănătoare cu metoda binecunoscută de centrare orizontală a unui element bloc cu lățime fixă (marja: 0 auto;).
Pro
- Foarte simplu.
Contra
- Nu funcționează în Internet Explorer
- Conținutul va fi tăiat fără bare de defilare dacă nu există suficient spațiu în container.
a 5-a metoda
Folosind această metodă, puteți centra o linie de text. Pur și simplu setăm înălțimea textului (linie-înălțime) egală cu înălțimea elementului (înălțimea). După aceasta, linia va fi afișată în centru.
Pro
- Funcționează în toate browserele.
- Nu taie textul dacă nu se potrivește.
Contra
- Funcționează numai cu text (nu funcționează cu elemente de bloc).
- Dacă există mai multe rânduri de text, arată foarte rău.
Această metodă este foarte utilă pentru elementele mici, cum ar fi centrarea textului într-un buton sau câmp de text.
Acum știți cum să obțineți alinierea verticală la centru, să facem un site web simplu care va ajunge să arate așa:
Pasul 1
Este întotdeauna bine să începeți cu marcajul semantic. Pagina noastră va fi structurată după cum urmează:
- #floater (pentru a centra conținutul)
- #centrat (element central)
- #partea
- #logo
- #nav (lista
- #conţinut
- #bottom (pentru drepturi de autor și toate astea)
Să scriem următorul marcaj html:
O companie centrată O companieTitlul paginii
Reproiectează holistic externalizarea cu valoare adăugată după colaborarea centrată pe proces și partajarea ideilor.
Simplificați din punct de vedere energetic piețele de nișă cu impact prin imperativele activate. Predominați holistic inovația premium după scenarii convingătoare. Recaptiualizați fără probleme standardele înalte în capitalul uman cu produse fabricate de ultimă generație. Distribuiți în mod distinct schemele conforme cu standardele înaintea vortalurilor robuste. Recaptiualizați în mod unic gradul de pregătire pentru web în raport cu informațiile disponibile.
Titlul 2
Îmbrățișați eficient pregătirea personalizată pentru web, mai degrabă decât procesele direcționate către client. Creșteți în mod asertiv imperativele multiplatforme față de tehnologiile proactive. Îmbunătățiți în mod convenabil meta-servicii multidisciplinare fără interfețe la nivel de întreprindere.
Simplificați convenabil domeniile tematice strategice competitive cu piețe electronice concentrate. Sindicați fosfluorescent comunități de clasă mondială față de piețele cu valoare adăugată. Reinventează în mod corespunzător serviciile holistice înaintea serviciilor electronice robuste.
Notificarea privind drepturile de autor ajunge aici
Html, corp ( margine: 0; umplutură: 0; înălțime: 100%; ) corp ( fundal: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serif; ) #floater ( poziție: relativă; float: stânga; înălțime: 50%; margine-jos: -200px; lățime: 1px; ) #centrat (poziția: relativ; clar: stânga; înălțime: 400px; lățime: 80%; max. -width: 800px; min-width: 400px margin: 0 auto: 4px solid #666 ) #bottom (poziție: absolut; dreapta: 0; ) ; umplutură: 20px;
Înainte de a ne alinia centrul de conținut, trebuie să setăm înălțimea corpului și html la 100%. Deoarece înălțimea este calculată fără umplutură internă și externă (padding și margine), le setăm (padding) la 0, astfel încât să nu existe bare de defilare.
Marja de jos pentru un element „plutitor” este egală cu minus jumătate din înălțimea conținutului (400px), și anume -200px ;
Pagina ta ar trebui să arate acum cam așa:
#latime element centrat 80%. Acest lucru face site-ul nostru mai restrâns pe ecranele mici și mai larg pe cele mai mari. majoritatea site-urilor arată indecent pe noile monitoare largi din colțul din stânga sus. Proprietățile min-width și max-width limitează, de asemenea, pagina noastră, astfel încât să nu pară prea lată sau prea îngustă. Internet Explorer nu acceptă aceste proprietăți. Trebuie să-l setați la o lățime fixă.
Deoarece elementul #centrated are poziție:setul relativ, putem folosi poziționarea absolută a elementelor din el. Apoi setați overflow:auto; pentru elementul #content, astfel încât să apară bare de defilare dacă conținutul nu se potrivește.
Pasul 3
Ultimul lucru pe care îl vom face este să adăugăm ceva stil pentru a face pagina să arate puțin mai atractivă. Să începem cu meniul.
#nav ul ( list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; culoare de fundal: #e8e8e8; margine: 0; margine de jos: 1px; conținut: „"” : #777; ) #nav li a:hover::after ( marjă: 0 0 0 7px; culoare: #f93; ) #nav li a:activ ( padding: 8px 7px 7px; )
Primul lucru pe care l-am făcut pentru a face meniul să arate mai bine a fost să eliminăm marcatorii prin setarea atributului list-style:none și, de asemenea, să setăm umplutura și umplutura, deoarece acestea variază foarte mult în mod implicit în diferite browsere.
Observați că apoi am specificat că legăturile ar trebui redate ca elemente bloc. Acum, când sunt afișate, acestea sunt întinse pe toată lățimea elementului în care se află.
Un alt lucru interesant pe care l-am folosit pentru meniu sunt pseudo-clasele:before și:after. Ele vă permit să adăugați ceva înainte și după un element. Aceasta este o modalitate bună de a adăuga pictograme sau simboluri, cum ar fi o săgeată la sfârșitul fiecărui link. Acest truc nu funcționează în Internet Explorer 7 și mai jos.
Pasul 4
Și nu în ultimul rând, vom adăuga câteva șuruburi designului nostru pentru și mai multă frumusețe.
#centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 (familie de fonturi: Helvetica, Arial, sans- serif; greutatea fontului: normală; culoare: #666; padding-top: 0; ) #bottom (padding: 10px; font-size: 0.7em; culoare: #f03; ) #logo (font-size: 2em; text-align: center; culoare: #999; ) #logo puternic (greutate font: normal; ) #logo span (afișare: bloc; dimensiune font: 4em; înălțime linie: 0,7 em; culoare: #666; ) p, h2, h3 ( înălțime linie: 1,6 em; ) a (culoare: #f03; )
În aceste stiluri setăm colțuri rotunjite pentru elementul #centrat. În CSS3, acest lucru se va face prin proprietatea border-radius. Acest lucru nu este încă implementat în unele browsere, în afară de utilizarea prefixelor -moz și -webkit pentru Mozilla Firefox și Safari/Webkit.
Compatibilitate
După cum probabil ați ghicit deja, principala sursă de probleme de compatibilitate este Internet Explorer:
- Elementul #floater trebuie să aibă un set de lățime
- IE 6 are umplutură suplimentară în jurul meniurilor
Vlad Merjevici
Datorită faptului că conținutul celulelor tabelului poate fi aliniat simultan pe orizontală și pe verticală, posibilitățile de control al poziției elementelor unul față de celălalt sunt extinse. Tabelele vă permit să setați alinierea imaginilor, textului, câmpurilor de formular și a altor elemente unul față de celălalt și cu pagina web în ansamblu. În general, alinierea este necesară în principal pentru a stabili o conexiune vizuală între elemente diferite, precum și grupările acestora.
Centrare pe verticală
O modalitate de a arăta vizitatorului focalizarea și numele site-ului este utilizarea unei pagini de start. Aceasta este prima pagină pe care, de regulă, există un ecran de splash flash sau o imagine care exprimă Ideea principală site-ul. Imaginea este, de asemenea, un link către alte secțiuni ale site-ului. Trebuie să plasați această imagine în centrul ferestrei browserului, indiferent de rezoluția monitorului. În acest scop, puteți utiliza un tabel cu lățime și înălțime de 100% (exemplul 1).
Exemplul 1: Centrarea desenului
Aliniere 
ÎN în acest exemplu alinierea orizontală este setată folosind parametrul etichetei align="center".
, iar conținutul celulei poate să nu fie centrat vertical, deoarece aceasta este poziția implicită. Pentru a seta înălțimea mesei la 100%, trebuie să eliminați, codul își încetează valabilitatea.
Utilizarea lățimii și înălțimii pentru a acoperi întreaga zonă disponibilă a paginii web asigură că conținutul tabelului va fi aliniat exact în centrul ferestrei browserului, indiferent de dimensiunea acestuia.
Alinierea orizontală
Prin combinarea atributelor align (aliniere orizontală) și valign (aliniere verticală) ale etichetei
, este permisă setarea mai multor tipuri de poziții ale elementelor unul față de celălalt. În fig. Figura 1 prezintă modalități de aliniere orizontală a elementelor. Să ne uităm la câteva exemple de aliniere a textului conform figurii de mai jos.
Alinierea de sus
Pentru a specifica alinierea superioară a conținutului celulei, pentru o etichetă
trebuie să setați atributul valign cu valoarea de sus (exemplul 2). Exemplul 2: Utilizarea valign
Aliniere Coloana 1 Coloana 2 În acest exemplu, caracteristicile celulei sunt controlate folosind parametrii etichetei
, dar este și mai convenabil să schimbați prin stiluri. În special, alinierea în celule este specificată de proprietățile vertical-align și text-align (exemplul 3).
Aliniere Coloana 1 Coloana 2 Pentru a scurta codul, acest exemplu folosește gruparea selectoarelor, deoarece proprietățile de aliniere verticală și de umplutură sunt aplicate la două celule în același timp.
Alinierea de jos se face în același mod, dar în loc de valoarea de sus, se folosește partea de jos.
Alinierea la centru
În mod implicit, conținutul celulelor este aliniat la centrul liniei lor verticale, așa că dacă coloanele au înălțimi diferite, trebuie să setați alinierea la marginea de sus.
Uneori mai trebuie să părăsiți metoda de aliniere inițială, de exemplu, când plasați formule, așa cum se arată în Fig. 2.
În acest caz, formula este situată strict în centrul ferestrei browserului, iar numărul acesteia este situat pe marginea dreaptă. Pentru a aranja elementele în acest fel, veți avea nevoie de un tabel cu trei celule. Celulele exterioare ar trebui să aibă aceleași dimensiuni, în celula din mijloc alinierea este centrată, iar în celula din dreapta - de-a lungul marginii din dreapta (exemplul 4). Acest număr de celule este necesar pentru a vă asigura că formula este poziționată în centru.
Aliniere 
(18.6) Exemplul 4: Alinierea formulei
În acest exemplu, prima celulă a tabelului este lăsată goală, servește doar pentru a crea o indentare, care, apropo, poate fi setată și folosind stiluri.
Alinierea elementelor de formular
Folosind tabele, este convenabil să determinați poziția câmpurilor de formular, mai ales atunci când acestea sunt intercalate cu text. Una dintre opțiunile de proiectare pentru formular, care este destinată introducerii unui comentariu, este prezentată în Fig. 3.
Pentru a vă asigura că textul de lângă câmpurile formularului este aliniat la dreapta și că elementele formularului în sine sunt aliniate la stânga, veți avea nevoie de un tabel cu un chenar invizibil și două coloane. Coloana din stânga va conține textul în sine, iar coloana din dreapta va conține câmpuri de text (exemplul 5).
Aliniere Adaugă un comentariu
- #partea