Acasă - Recuperare
Centrați elementul pe pagina css. Centrarea div-ului și alte subtilități de poziționare

Centrarea elementelor pe verticală folosind CSS este o sarcină care prezintă o anumită dificultate pentru dezvoltatori. Cu toate acestea, există mai multe metode de rezolvare, care sunt destul de simple. Această lecție prezintă 6 opțiuni pentru centrarea verticală a conținutului.

Să începem cu o descriere generală a problemei.

Problemă de centrare verticală

Centrarea orizontală este foarte simplă și ușoară. Când elementul centrat este inline, folosim proprietatea de aliniere relativă la elementul părinte. Când elementul este la nivel de bloc, îi setăm lățimea și setarea automată a marginilor din stânga și din dreapta.

Majoritatea oamenilor, când folosesc proprietatea text-align:, se referă la proprietatea vertical-align pentru centrarea verticală. Totul pare destul de logic. Dacă ați folosit șabloane de tabel, probabil că ați folosit pe scară largă atributul valign, ceea ce întărește credința că vertical-align este modalitatea corectă de a rezolva problema.

Dar atributul valign funcționează numai pe celulele tabelului. Și proprietatea de aliniere verticală este foarte asemănătoare cu aceasta. De asemenea, afectează celulele tabelului și unele elemente inline.

Valoarea proprietății de aliniere verticală este relativă la elementul inline părinte.

  • Într-o linie de text, alinierea este relativă la înălțimea liniei.
  • Celula tabelului folosește alinierea în raport cu o valoare calculată printr-un algoritm special (de obicei, înălțimea rândului).

Dar, din păcate, proprietatea vertical-align nu funcționează pe elementele la nivel de bloc (de exemplu, paragrafele din interiorul unui element div). Această situație poate face să se creadă că nu există o soluție la problema alinierii verticale.

Dar există și alte metode de centrare a elementelor bloc, a căror alegere depinde de ceea ce este centrat în raport cu containerul exterior.

Metoda linie-înălțime

Această metodă funcționează atunci când doriți să centrați vertical o linie de text. Tot ce trebuie să faceți este să setați înălțimea liniei să fie mai mare decât dimensiunea fontului.

În mod implicit, spațiul alb va fi distribuit uniform în partea de sus și de jos a textului. Și linia va fi centrată vertical. Adesea, înălțimea liniei este egală cu înălțimea elementului.

HTML:

Text obligatoriu

CSS:

#copil (înălțimea liniei: 200px; )

Această metodă funcționează în toate browserele, deși poate fi folosită doar pentru o singură linie. Valoarea 200 px din exemplu a fost aleasă în mod arbitrar. Puteți utiliza orice valoare mai mare decât dimensiunea fontului textului.

Centrarea unei imagini folosind Line-Height

Ce se întâmplă dacă conținutul este o imagine? Va funcționa metoda de mai sus? Răspunsul se află într-o altă linie de cod CSS.

HTML:

CSS:

#parent ( line-height: 200px; ) #parent img ( vertical-align: middle; )

Valoarea proprietății line-height trebuie să fie mai mare decât înălțimea imaginii.

Metoda tabelului CSS

S-a menționat mai sus că proprietatea vertical-align este folosită pentru celulele tabelului, unde funcționează excelent. Putem afișa elementul nostru ca o celulă de tabel și putem folosi proprietatea de aliniere verticală pentru a centra vertical conținutul.

Nota: Un tabel CSS nu este același lucru cu un tabel HTML.

HTML:

Conţinut

CSS:

#părinte (afișare: tabel;) #copil (afișare: tabel-celulă; vertical-align: mijloc; )

Setăm ieșirea tabelului la elementul div părinte și ieșim elementul div imbricat ca o celulă de tabel. Acum puteți utiliza proprietatea de aliniere verticală pe containerul interior. Totul din el va fi centrat vertical.

Spre deosebire de metoda de mai sus, în acest caz conținutul poate fi dinamic deoarece elementul div își va schimba dimensiunea în funcție de conținutul său.

Dezavantajul acestei metode este că nu funcționează în versiunile mai vechi de IE. Trebuie să utilizați proprietatea display: inline-block pentru containerul imbricat.

Poziționare absolută și marje negative

Această metodă funcționează și în toate browserele. Dar necesită ca elementului centrat să i se acorde o înălțime.

Exemplul de cod efectuează centrarea orizontală și verticală în același timp:

HTML:

Conţinut

CSS:

#părinte (poziție: relativ;) #copil (poziția: absolut; sus: 50%; stânga: 50%; înălțime: 30%; lățime: 50%; marjă: -15% 0 0 -25%; )

Mai întâi, setăm tipul de poziționare a elementului. Apoi, setăm proprietățile de sus și stânga ale elementului div imbricat la 50%, ceea ce corespunde centrului elementului părinte. Dar centrul este colțul din stânga sus al elementului imbricat. Prin urmare, trebuie să îl ridicați (jumătate din înălțime) și să îl mutați la stânga (jumătate din lățime), iar apoi centrul va coincide cu centrul elementului părinte. Deci este necesară cunoașterea înălțimii elementului în acest caz. Apoi setăm elementul cu margini negative de sus și stânga egale cu jumătate din înălțime și, respectiv, lățime.

Această metodă nu funcționează în toate browserele.

Poziționare și întindere absolută

Exemplul de cod efectuează centrarea verticală și orizontală.

HTML:

Conţinut

CSS:

#părinte (poziție: relativă;) #copil (poziția: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; lățime: 50%; înălțime: 30%; margine: auto; )

Ideea din spatele acestei metode este de a întinde elementul imbricat la toate cele 4 margini ale elementului părinte prin setarea proprietăților de sus, jos, dreapta și stânga la 0.

Setarea marjei pentru a genera automat pe toate părțile va seta valori egale pe toate cele 4 laturi și va centra elementul nostru div imbricat pe elementul său părinte.

Din păcate, această metodă nu funcționează în IE7 și mai jos.

Spații egale deasupra și dedesubt

În această metodă, umplutura egală este setată în mod explicit în partea de sus și de jos a elementului părinte.

HTML:

Conţinut

CSS:

#părinte ( umplutură: 5% 0; ) #copil ( umplutură: 10% 0; )

Exemplul de cod CSS setează umplutura de sus și de jos pentru ambele elemente. Pentru un element imbricat, setarea căptușelii va servi pentru a-l centra vertical. Și umplutura elementului părinte va centra elementul imbricat în el.

Unitățile de măsură relative sunt utilizate pentru a redimensiona dinamic elementele. Iar pentru unitățile de măsură absolute va trebui să faci calcule.

De exemplu, dacă elementul părinte are o înălțime de 400 px, iar elementul imbricat este de 100 px, atunci este nevoie de 150 px de umplutură în partea de sus și de jos.

150 + 150 + 100 = 400

Utilizarea % vă permite să lăsați calculele în seama browserului.

Această metodă funcționează peste tot. Dezavantajul este nevoia de calcule.

Nota: Această metodă funcționează prin setarea căptușelii exterioare a unui element. De asemenea, puteți utiliza margini în cadrul unui element. Decizia de a folosi margini sau padding trebuie luată în funcție de specificul proiectului.

div plutitor

Această metodă folosește un element div gol care plutește și ajută la controlul poziției elementului nostru imbricat în document. Rețineți că div-ul plutitor este plasat înaintea elementului nostru imbricat în codul HTML.

HTML:

Conţinut

CSS:

#părinte (înălțime: 250px;) #floater ( plutitor: stânga; înălțime: 50%; lățime: 100%; margine-jos: -50px; ) #copil (clar: ambele; înălțime: 100px; )

Compensam div-ul gol la stânga sau la dreapta și îi setăm înălțimea la 50% din elementul părinte. În acest fel, va umple jumătatea superioară a elementului părinte.

Deoarece acest div plutește, este eliminat din fluxul normal al documentului și trebuie să desfacem textul pe elementul imbricat. Exemplul folosește clear: both , dar este suficient să folosiți aceeași direcție ca decalajul unui element div plutitor gol.

Marginea de sus a unui element div imbricat este direct sub marginea de jos a unui element div gol. Trebuie să mutăm elementul imbricat în sus cu jumătate din înălțimea elementului gol plutitor. Pentru a rezolva problema, utilizați o valoare negativă a proprietății marginii de jos pentru un element div vid plutitor.

Această metodă funcționează și în toate browserele. Cu toate acestea, utilizarea acestuia necesită un element div gol suplimentar și cunoașterea înălțimii elementului imbricat.

Concluzie

Toate metodele descrise sunt ușor de utilizat. Dificultatea este că niciuna dintre ele nu este potrivită pentru toate cazurile. Trebuie să analizați proiectul și să îl alegeți pe cel care se potrivește cel mai bine cerințelor.

Analizăm alinierea elementelor bloc în CCS. Asezam mai multe in centru DIV sau LI elemente. Ofer câteva dintre opțiunile mele pentru majoritatea cazurilor.

Acest articol nu își propune să enumere toate opțiunile de aliniere și să rescrie ceea ce există deja undeva. Nu-mi amintesc de ce, dar de multe ori nu eram mulțumit de opțiunile oferite. Fie au existat blocuri fixe, fie totul s-a prăbușit în timpul aspectului adaptiv, sau alte neajunsuri.

Uneori, pentru a vă alinia la centru, este suficient să adăugați câteva atribute și nu aveți nevoie de nimic complicat. De exemplu, la fel sunt.

Mai jos sunt câteva opțiuni pentru aspectul adaptiv pentru alinierea blocurilor în centru, pe care eu eu folosesc pe site-urile lor. Și dacă prima este destul de comună, atunci poate că alte metode nici măcar nu vor fi descrise pe Internet exact în acest fel.

Opțiunea 1

Alinierea simplă a tuturor blocurilor la centrul paginii.

Să ne concentrăm Conținut UL din 4 elemente LI, care sunt în bloc DIV cu clasa recipient.






În acest caz, următoarele reguli în CSS sunt suficiente:

Container (
latime: 100%;
}

Container ul (
text-align: centru;
stil de listă: niciunul;
}

Container li (
display: inline-block;
}

Obținem următoarea vedere: Există 4 elemente LI centrate aici. Când dimensiunea ecranului este redusă, elementele care nu se potrivesc sunt mutate în jos.

Dacă blocuri LI cu aceste proprietăți nu sunt instalate în centru, ceea ce înseamnă că o altă proprietate interferează cu ele. De exemplu, aceasta ar putea fi proprietatea float:stânga sau afisare: tabel; sau altul.

Acum puteți adăuga alte stiluri la structura de sus (în cadrul de bază de aliniere CSS). De exemplu, faceți blocuri de dimensiune fixă ​​și indentați unul pe celălalt:

Container li (
display: inline-block;
marja: 5px;
lățime: 100px;
}

Obținem următoarele:

Dar există un dezavantaj al acestei opțiuni. Blocurile sunt situate în centru, dar sunt distanțe uriașe la stânga și la dreapta. Ele pot fi reduse prin modificarea lățimii.

Sau puteți face recipiente de aceeași dimensiune, astfel încât să existe indentări doar între containere și să nu fie niciuna în stânga și în dreapta.

Apoi vom elimina margineași adăugați lățimea acestuia lăţime astfel încât să acopere complet zona.

Container li (
vertical-align: top;
display: inline-block;
latime: 32,899%;
}

Va exista o mică zonă de spațiu gol între blocuri. Și pentru a-l face și mai mare, vă puteți retrage în interior folosind parametrul căptușeală.

În blocuri nu adaug în mod deliberat nimic în plus pentru a lăsa exact acele stiluri care afectează direct alinierea. Dar dacă faci același lucru, nu vei primi astfel de blocuri. Numai pentru că, în primul rând, trebuie să adăugați culoare blocului și, în al doilea rând, dacă este gol, puneți înălțime: 100px;. Alte atribute sunt pe placul tau.

Versiunea finală este:

În captura de ecran de mai sus, am lăsat alte zone ale site-ului, astfel încât să fie clar unde sunt limitele blocurilor, pentru că dacă acestea sunt adiacente marginii, atunci marginea în sine nu mai este vizibilă. Și în imagine, marginile albe din stânga și din dreapta sunt o aliniere diferită care nu are nimic în comun cu exemplul în cauză. Repet, blocurile în sine sunt adiacente marginilor, care nu sunt vizibile, deoarece blocurile le acoperă complet.

Opțiunea 2

Există multe modalități de a centra blocurile. Dar dacă trebuie să faci alinierea mai inteligentă, trebuie să-ți faci creierul. Din fericire, am venit cu o metodă interesantă în următoarele scopuri:

Cum centrez toate div-urile astfel încât blocul de pe următoarea linie să fie aliniat la stânga?

Avem următoarea structură:



Blocul 1


Blocul 2


Blocul 3


Blocul 4


Blocul 5

Scriem cursuri pentru ei:


latime: 90%;
marja: 0 auto;
}

Arhiva-articol (
display: inline-block;
vertical-align: top;

Lățime: calc(33,3333% - (0,666666666667 * 36px));
marjă: 0 10px 0 11px;
}

Vă rugăm să rețineți că dacă schimbați mărimile calc, atunci trebuie să ajustați experimental dimensiunile marginea. În caz contrar, blocurile nu vor fi centrate.

Această aliniere trebuie făcută cu ochiul. Dar dacă există mai puține blocuri pe noua linie decât pe linia de mai sus, acest bloc singuratic va fi cu partea stângă. Și arată mult mai frumos decât atunci când pe linia următoare un singur bloc este situat în centru.

Prin aplicarea tehnicii de mai sus, vom obține un aspect adaptiv, cu toate marginile egale, care nu se va deteriora la schimbarea dimensiunilor ecranului.

Și dacă dorim ca versiunea mobilă să nu aibă 3 blocuri, ci 2, atunci în ccs pentru o rezoluție de 768 pixeli, vom împărți blocurile diferit:

Ecran @media și (lățime maximă: 768 px) (
.arhiva-articol (
lățime: calc(47,3333% - (0,666666666667 * 25px));
marjă: 0 10px 0 20px;
}
}

Să obținem aceleași blocuri în versiunea mobilă, dar cu două blocuri pe linie:

Opțiunea 3

Acum ne vom alinia folosind flex. Acesta poate părea modul ideal de a nivela, deoarece de fapt funcționează foarte simplu. Cu toate acestea, FLEX nu face față sarcinii descrise în opțiunea 2. Cel puțin, nu am reușit să obțin aceleași rezultate.

La secțiunea următoare:

Adăugarea stilurilor:

#cssmenu (
marja: 20px automat;
}

#cssmenu ul (
stil de listă: niciunul;
display: flex;
flex-wrap: wrap;
justificare-conținut: centru;
}

#cssmenu > ul > li (
marja: 1px;
}

Primim:

În exemplul dat:

flex-wrap: wrap;

Mută ​​blocurile pe linia următoare dacă umplu containerul. În caz contrar, vor merge mai departe în afara ferestrei browserului.

justificare-conținut: centru;

Aliniem conținutul blocurilor la centru.

Opțiunea 4

O altă opțiune de aliniere folosind tehnologia flex.

Avem un container cu două blocuri înăuntru. Avem nevoie de aceste 2 blocuri pentru a împărți lățimea în două laturi egale.


Blocul 1

Blocul 2

Pentru a face acest lucru, vom scrie următoarele proprietăți în stiluri:

Container (
display: flex;
}

Blocare (
flex-baze: 100%;
}

Opțiunea 5

Există o altă opțiune pentru centrarea blocurilor, dacă numărul lor este strict egal. De exemplu: există 9 blocuri, câte 3 pentru fiecare linie. Și știi că așa va rămâne mereu. De exemplu, creați o pagină de destinație și știți sigur că nu se va adăuga nimic inutil pe site între aceste blocuri.

Deci, avem 9 blocuri de următorul tip (nu am duplicat liniile de 9 ori, dar rețineți că există 9 blocuri):



Blocul 1


Blocul 2


Blocul 3

Aplicați stiluri pentru ele:

Container-arhivă-pentru-articole (
latime: 100%;
text-align: centru;
}

Arhiva-articol (
latime: 25%;
vertical-align: top;
display: inline-block;
text-align: stânga;
}

Arhiva-articol:nth-child(1),
.arhivă-articol:nth-child(4),
.arhivă-articol:nth-child(7) (
marjă: 20px 0 30px 40px;
}

Arhiva-articol:nth-child(2),
.arhivă-articol:nth-child(5),
.arhivă-articol:nth-child(8) (
marjă: 20px 40px 30px;
}

Arhiva-articol:nth-child(3),
.arhivă-articol:nth-child(6),
.arhivă-articol:nth-child(9) (
marjă: 20px 40px 30px 0;
}

Vom obține, de asemenea, un aspect adaptiv. Când ecranul este redus, blocul care nu se potrivește va merge în centrul de jos

Avantajul acestui tip de centrare este că puteți face clar și clar adâncituri între blocuri.

Principalul dezavantaj este că nimic nu poate fi plasat în interiorul blocurilor. Orice element:

fie el div sau p sau altceva, va fi considerat ca un element intern al-lea copil. Ca rezultat, stilurile CSS vor fi suprapuse pe el și toate indentările făcute folosind margine vor muta blocurile diferit decât intenționat inițial.

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 vom face, de asemenea, 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 metode diferite și la avantajele și dezavantajele fiecăreia. Exemplu.

1a metoda

Această metodă presupune că setăm un element

metoda de afișare ca tabel, după aceea putem folosi proprietatea vertical-align în ea (care funcționează diferit în diferite elemente).

Câteva informații utile care ar trebui să fie centrate.
#wrapper( afișare: tabel; ) #celulă (afișare: tabel-celulă; aliniere verticală: mijloc; )

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.

Conținut aici
#conținut (poziția: absolut; sus: 50%; înălțime: 240px; margin-top: -120px; /* minus jumătate din înălțime */ )

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.

aici este continutul
#floater( float: stânga; înălțime: 50%; margin-bottom: -120px; ) #conținut( clar: ambele; înălțime: 240px; poziție: relativă; )

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;).

Informații importante.
#conținut( poziție: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; margine: automat; înălțime: 240px; lățime: 70%; )

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.

Metoda a 5-a

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.

O oarecare linie de text
#conținut( înălțimea: 100px; înălțimea liniei: 100px; )

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 știi cum să obții alinierea verticală la centru, hai să creăm 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ă

    Titlul 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 standarde înalte în capitalul uman cu produse fabricate de vârf. Distribuiți în mod distinct schemele conforme cu standardele înaintea vortalurilor robuste. Recaptiualizați în mod unic gradul de pregătire a web-ului î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. Împuterniciț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

    Pasul 2

    Acum vom scrie cel mai simplu CSS pentru a plasa elemente pe pagină. Ar trebui să salvați acest cod într-un fișier style.css. În acest sens este scris linkul în fișierul html.

    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.

    #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ă am specificat apoi 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

    Adesea, în practică, trebuie să rezolvăm problema grupării și alinierii conținutului folosind CSS. Astăzi ne vom uita la principalele modalități de plasare a elementelor într-un rând orizontal.

    Materialul din acest articol este destinat să ajute designerii web începători să stăpânească tehnicile de aspect al paginilor web.

    Din ce să alegeți sau metode

    Există mai multe moduri de a aranja elementele structurale într-un rând într-un plan orizontal. Cele mai utile, din punct de vedere al aplicării practice, sunt:

    • Metoda „plutitoare”.
    • Metoda „inline-block”.
    • Metoda tabel-celulă

    Fiecare dintre ele are propriile sale avantaje, aplicații și dezavantaje. Să le privim în ordine.

    „Pentru o descoperire” sau o mică teorie

    Toate elementele structurale ale HTML pot fi împărțite în:

    În linie(încorporat) – tip img, span si altele asemenea. Nu avem capacitatea de a le schimba fundalul sau de a le oferi dimensiuni liniare arbitrare.

    Bloc– ocupând întreaga lățime a blocului părinte, începând întotdeauna pe o linie nouă – p, h, div.

    Un exemplu vizual de structuri inline și bloc este dat mai jos:

    Metoda flotant

    După cum se știe deja (vezi mai sus), un element bloc este plasat pe o nouă linie, indiferent de lățimea specificată pentru el ( lăţime). Prin urmare, reducerea dimensiunii orizontale div-O, nu poți construi blocuri la rând.

    Cea mai populară metodă de soluție (în special printre designerii de layout începători) este utilizarea proprietății plutesc.

    proprietate CSS plutesc a câștigat o mare popularitate și valoare practică după trecerea de la metoda de aranjare tabelară la cea bloc.

    Float: stânga (dreapta) transformă un element de bloc într-unul plutitor, îl aliniază la marginea din stânga (dreapta) a blocului părinte și setează textul și alte elemente să se încadreze la dreapta (stânga).

    De exemplu, să creăm patru blocuri care trebuie plasate pe rând:

    < html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Construim < div class = "bblock" >orizontală < div class = "bblock" >rând < div class = "bblock" >din dive

    Și o foaie de stil externă cu următorul conținut:

    div ( float: stânga; /*Setați ambalajul*/înălțimea liniei: 120px; dimensiunea fontului: 40px; }

    fundal: dodgeblue;

    culoare: alb;

    margine-sus: 60px;

    lățime: 320px; /*Remediați lățimea blocului*/.

    Rezultatul sunt patru blocuri aranjate pe un rând orizontal și aliniate la marginea din stânga a blocului părinte:

    < div style= "clear: both;" >

    Uneori, în practică, este necesară alinierea blocurilor la marginea dreaptă a elementului părinte. Să modificăm fluxul în jurul blocurilor din exemplul anterior: plutire: dreapta; Atenție la inscripțiile situate în blocuri. La prima vedere, poate părea că exemplul a funcționat strâmb. Dar, de fapt, browserul a procesat corect codul: a citit blocurile de sus în jos și a făcut ceea ce i-am cerut - l-a aliniat la dreapta. Vă rugăm să rețineți acest aspect atunci când utilizați proprietatea

    plutire: dreapta

    < div class = "wrap" > < div class = "bblock" >Construim < div class = "bblock" >orizontală < div class = "bblock" >rând < div class = "bblock" >din dive

    Pentru a întrerupe fluxul de elemente dintr-un anumit loc, utilizați linia: În exemplul discutat mai sus, setăm distanța dintre blocuri folosind indentarea margine-dreapta . Dar ce să faceți dacă, atunci când așezați o pagină, aveți o sarcină: să plasați blocuri pe rând, să le centrați și, de asemenea, să aveți indentări doar între ele, dar nu în exterior? Algoritmul acțiunilor este următorul. /*Setați ambalajul*/ Wrap ( lățime: 1310px; /*remediază lățimea ambalajului*/ marja: 0 auto; /*centrează-l*/ fundal: gri închis; dimensiunea fontului: 40px;înălțime: 120px; /*Setați înălțimea învelișului*/) . bloc (float: stânga; înălțimea liniei: 120px; }

    /*Inaltimea liniei + vert. centrarea textului*/

    dimensiunea fontului: 40px;

    fundal: dodgeblue;

    culoare: alb;

    lățime: 320px;

    Faceți cunoștință cu punctul culminant al programului - proprietate display: inline-block.

    display: inline-block generează un element de linie bloc, care este în esență un element de linie, dar păstrează proprietățile blocului - vă permite să modificați dimensiunile liniare, să setați margini, indentări etc.

    Un element de linie bloc are următoarele proprietăți:

    • Înălțimea și lățimea blocului sunt determinate automat pe baza conținutului și a valorii de umplutură ( căptușeală)
    • înălțimea și lățimea blocului pot fi setate fix
    • Nu există niciun efect al colapsării granițelor.

    Să ne uităm la un exemplu de creare a unui meniu de navigare simplu care conține o imagine și un link.

    < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Linkul meniului 1 este mai lung decât de obicei < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Link meniu 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Link meniu 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Link meniu 4

    Nav ( display: bloc inline; /*Setați afișarea liniei de blocare*/ latime: 180px; /*setează lățimea blocului*/ fundal: dodgeblue; ) . șir ( text- align: center; }

    /*Aliniați textul pe orizontală*/

    Drept urmare, obținem următorul meniu: După cum puteți vedea, sa dovedit puțin strâmb... Dar nu intenționăm să fim supărați, așa că aplicăm proprietatea CSS div-urilor noastre vertical-align

    (vezi mai jos pentru detalii):

    vertical-align: top;

    Bara noastră de navigare este acum aliniată la linia de sus:

    fundal: dodgeblue;

    • Desigur, exemplul dat este primitiv, dar sunt sigur că pe baza lui poți crea o adevărată capodoperă!!!

      Pentru versiunile mai vechi de Firefox, adăugați linia:


      afisare: - moz- inline- stack;
    • și înfășurați elementul într-un înveliș suplimentar div.

      IE 7 și versiuni anterioare - adăugați liniile: zoom: 1;/*set hasLayout*/ * display: inline; /*asterisc – hack pentru IE */

    • _înălțime: 250px;

    /*min-height nu funcționează în IE6*/

    Observ că anumite browsere reacționează selectiv la aceste linii (Firefox la prima, IE la restul).

    Metoda tabelului Abordarea tabulară a fost mult timp standardul de aspect, în primul rând datorită simplității și intuitivității markupului. Cel mai probabil, aceasta este ceea ce a cauzat apariția formatării tabelelor în CSS. (Proprietăți, afisare: tabel tabel-celula

    inline-table Abordarea tabulară a fost mult timp standardul de aspect, în primul rând datorită simplității și intuitivității markupului. Cel mai probabil, aceasta este ceea ce a cauzat apariția formatării tabelelor în CSS.), vă permit să efectuați formatarea tabelară a elementelor fără a utiliza tabelele HTML. Pentru a plasa blocuri pe orizontală, avem nevoie de un element părinte care are proprietatea:

    < div class = "wrap" > < div class = "bblock" >Construim < div class = "bblock" >, și elemente copil (celule) având proprietatea < div class = "bblock" >rând < div class = "bblock" >din dive

    afișare: tabel-celulă

    fundal: dodgeblue;

    1. Spre deosebire de metodele „Inline-block” și „float”, atunci când se reduce lățimea ferestrei browserului web, celulele nu se mișcă în jos.
    2. Nu aveți capacitatea de a seta proprietatea marginii pentru celulele pseudotabelului.
    3. Compatibilitate între browsere. Proprietățile afișajului: familia tabel* nu sunt acceptate de IE6, IE7. În plus, în IE8 este posibil să vedeți o eroare de randare dinamică pentru elemente pseudo-tabulare sub formă de celule lipsă aleatoriu. Această eroare apare cel mai adesea în timpul desenului inițial al documentului.

    Sarcină

    Aliniați un element bloc de o lățime dată la centrul orizontal al paginii web.

    Soluţie

    În mod implicit, lățimea unui element de bloc este setată la auto și, de obicei, va ocupa întreaga lățime disponibilă. Prin urmare, folosind metoda descrisă, puteți alinia centrat doar un element a cărui lățime este specificată în mod explicit în procente sau pixeli. După aceea, ar trebui să adăugați o marjă stilului stratului din stânga (proprietatea stilului margin-left ) și din dreapta (margin-right ) cu valoarea auto . Cu toate acestea, puteți utiliza și proprietatea marjă universală cu valoarea auto (exemplul 1).

    Exemplul 1: Alinierea unui strat la centru

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    Alinierea unui strat la centru

    Lungimea vectorului inversează integrala dublă pozitivă.


    Rezultatul exemplului este prezentat în Fig. 1.
 

Citire:



Poziția capetelor pe antenă

Poziția capetelor pe antenă

Articolul dezvăluie principalele metode de determinare a azimutului folosind o busolă magnetică și locurile de utilizare posibilă a acestuia. Utilizare...

Cum să descărcați și să configurați un asistent inteligent pentru un dispozitiv Android

Cum să descărcați și să configurați un asistent inteligent pentru un dispozitiv Android

Data actualizării: 2017-08-05 09:22:20 Ultima versiune: Compatibilitate: de la Android 4.0.3-4.0.4 - la Android 6.0 Drepturi de aplicare: Schimbarea modurilor...

Opțiuni „Peste tot acasă” și „Peste tot acasă, Rusia” MTS - descriere, cost, cum să vă conectați

Opțiuni „Peste tot acasă” și „Peste tot acasă, Rusia” MTS - descriere, cost, cum să vă conectați

Rusia ocupă o zonă imensă a planetei noastre. Mulți ruși se confruntă cu călătorii frecvente în țara lor natală: călătorii de afaceri, călătorii...

Cum să recuperați sau să resetați o parolă de utilizator Windows

Cum să recuperați sau să resetați o parolă de utilizator Windows

Dacă ați uitat brusc parola pentru contul dvs. Windows, atunci nu aveți de ales decât să căutați o modalitate de a o reseta sau de a seta...
imagine-alimentare RSS