Meniu
AcasăWindows 10

Toate metodele de aliniere verticală în CSS. Centrarea div-ului și alte subtilități de poziționare

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, pentru alinierea verticală există o proprietate specială de aliniere verticală în CSS cu mai multe valori. 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.
Pentru a ilustra, luați în considerare următorul exemplu.

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 sunt cunoscute. Să adăugăm afișajul regulii: bloc inline la elementul interior și aliniere text: centru și aliniere verticală: 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? Ideea este că proprietatea de aliniere verticală afectează alinierea elementului în sine, nu conținutul acestuia (cu excepția cazului în care este aplicată la celulele 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 setată 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 cu î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 înălțime linie ș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 prin „întindere” Această metodă poate fi utilizată atunci când înălțimea blocului exterior este necunoscută, dar este cunoscută înălțimea celui interior.

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.
    • .exterior (poziție: relativă; ) .interior (înălțime: 100px; poziție: absolut; sus: 0; jos: 0; margine: auto 0; )
    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.

    Alinierea folosind margine-top negativ 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%; margine-sus: -50px; )
    http://jsfiddle.net/c1bgfffq/13/

    Dezavantajul acestei metode este că trebuie cunoscută înălțimea unității interioare.

    Alinierea folosind transform Această metodă este similară cu cea anterioară, dar poate fi folosită atunci când înălțimea blocului interior 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ă.

    Alinierea cu Flexbox Cel mai modern mod de aliniere verticală este utilizarea Flexible Box Layout (cunoscută în mod popular ca 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 pentru a afișa: 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

    De la autor: Vă urez bun venit din nou pe paginile blogului nostru. În articolul de astăzi aș dori să vorbesc despre diverse tehnici de aliniere care pot fi aplicate atât la blocuri, cât și la conținutul acestora. În special, cum să aliniați blocurile în css, precum și alinierea textului.

    Alinierea blocurilor la centru

    În CSS, centrarea unui bloc este ușoară. Aceasta este cea mai cunoscută tehnică pentru mulți, dar aș vrea să vorbesc despre ea chiar acum, în primul rând. Aceasta înseamnă alinierea centrată orizontal în raport cu elementul părinte. Cum se face? Să presupunem că avem un container și subiectul nostru experimental este în el:

    < div id = "wrapper" >

    < div id = "header" > < / div >

    < / div >

    Să presupunem că acesta este antetul site-ului. Nu se întinde pe toată lățimea ferestrei și trebuie să o centram. Scriem astfel:

    #header(

    latime / max - latime : 800px ;

    marja: 0 auto;

    Trebuie să specificăm lățimea exactă sau maximă și apoi să notăm proprietatea cheii - margine: 0 auto. Setează marginile exterioare ale antetului nostru, prima valoare determină marginile de sus și de jos, iar a doua determină marginile din dreapta și din stânga. Valoarea auto îi spune browserului să calculeze automat umplutura pe ambele părți, astfel încât elementul să fie exact centrat pe părintele său. Confortabil!

    Alinierea textului

    Aceasta este, de asemenea, o tehnică foarte simplă. Pentru a alinia toate elementele inline, puteți utiliza proprietatea text-align și valorile acesteia: stânga, dreapta, centru. Acesta din urmă centrează textul, care este ceea ce avem nevoie. Puteți chiar să aliniați o imagine în același mod, deoarece este, de asemenea, un element inline în mod implicit.

    Aliniați textul pe verticală

    Dar acest lucru este mai complicat. În mod implicit, nu există nicio proprietate simplă, binecunoscută, care să centreze cu ușurință textul pe verticală într-un container bloc. Cu toate acestea, există mai multe tehnici cu care designerii de layout au venit de-a lungul anilor.

    Setați înălțimea blocului folosind căptușeală. Modul nu este să setați o înălțime explicită folosind înălțimea, ci să o creați artificial folosind căptușeli în partea de sus și de jos, care ar trebui să fie aceleași. Să creăm orice bloc și să îi scriem următoarele proprietăți:

    div( fundal: #ccc; umplutură: 30px 0; )

    div(

    fundal: #ccc;

    umplutură: 30px 0;

    Fundalul este doar pentru a arăta vizual marginile, precum și umplutura. Acum, înălțimea blocului este formată din aceste două liniuțe și linia în sine și totul arată astfel:

    Definiți înălțimea liniei pentru bloc. Cred că acesta este un mod mai corect dacă trebuie să aliniați o linie de text. Cu acesta, puteți scrie înălțimea conform normalului, folosind proprietatea înălțime. După aceasta, trebuie să seteze și înălțimea liniei, la fel ca înălțimea blocului în ansamblu.

    div( înălțime: 60px; înălțime linie: 60px; )

    div(

    înălțime: 60px;

    înălțimea liniei: 60px;

    Rezultatul va fi similar cu imaginea de mai sus. Totul va funcționa chiar dacă adăugați umplutură. Cu toate acestea, doar pentru o linie. Dacă aveți nevoie de mai mult text în element, atunci această metodă nu va funcționa.

    Convertiți un bloc într-o celulă de tabel. Esența acestei metode este că celula tabelului are proprietatea vertical-align: middle, care centrează elementul pe verticală. În consecință, în acest caz, blocul trebuie setat la următoarele:

    div( afișare: celulă-tabel; aliniere verticală: mijloc; )

    div(

    afișare: tabel - celulă;

    vertical - aliniere: mijloc;

    Această metodă este bună deoarece puteți alinia cât de mult text doriți în centru. Dar este mai bine să scrieți display: table în blocul în care este imbricat div-ul nostru, altfel s-ar putea să nu funcționeze.

    Ei bine, aici ajungem la ultima tehnică pentru astăzi - aceasta este alinierea verticală a blocurilor în sine. Trebuie spus că, din nou, nu există nicio proprietate care să fie concepută special pentru asta, dar există câteva trucuri de care ar trebui să fii conștient.

    Setați indentări ca procent. Dacă cunoașteți înălțimea unui element părinte și plasați un alt element bloc în interiorul acestuia, îl puteți centra folosind umplutura procentuală. De exemplu, părintele are o înălțime de 600 de pixeli. Puneți un bloc în el care are 300 de pixeli înălțime. Cât de mult ai nevoie să dai înapoi în partea de sus și de jos pentru a-l centra? 150 de pixeli fiecare, ceea ce reprezintă 25% din înălțimea părintelui.

    Această metodă permite alinierea numai atunci când dimensiunile permit calcule. Și dacă părintele tău are 887 de pixeli în înălțime, atunci nu vei putea înregistra nimic cu precizie, acest lucru este deja clar.

    Inserați un element într-o celulă de tabel. Din nou, dacă transformăm elementul părinte într-o celulă de tabel, atunci blocul inserat în acesta va fi centrat automat pe verticală. Pentru a face acest lucru, părintele trebuie doar să seteze vertical-align: middle.

    Și dacă, pe lângă aceasta, scriem și margine: 0 auto, atunci elementul va deveni centrat orizontal!

    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 pentru a fi afișat ca tabel, apoi putem folosi proprietatea vertical-align pe el (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ă suficient spațiu 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 vârful setat la 50% și margin-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.

    #wrapper( afișare: tabel; ) #celulă (afișare: tabel-celulă; aliniere verticală: mijloc; )
    • Conținut aici #conținut ( poziție: absolut; sus: 50%; înălțime: 240px; margin-sus: -120px; /* minus jumătate din înălțime */ )
    • Funcționează în toate browserele.
    Conținutul nu este întrerupt dacă nu există suficient spațiu pentru el.
    • Nu există cuibări inutile.
    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.

    În această metodă, vom împacheta 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 conținutul #floater( float: stânga; înălțime: 50%; margin-bottom: -120px; ) #conținut( clar: ambele; înălțime: 240px; poziție: relativă; )

    #wrapper( afișare: tabel; ) #celulă (afișare: tabel-celulă; aliniere verticală: mijloc; )
    • Conținut aici #conținut ( poziție: absolut; sus: 50%; înălțime: 240px; margin-sus: -120px; /* minus jumătate din înălțime */ )
    • 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.
    Conținutul nu este întrerupt dacă nu există suficient spațiu pentru el.
    • Nu mă pot gândi decât la un singur lucru: că se folosește un element gol suplimentar.
    a 4-a metoda.

    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.

    #wrapper( afișare: tabel; ) #celulă (afișare: tabel-celulă; aliniere verticală: mijloc; )
    • #conținut( poziție: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; margine: automat; înălțime: 240px; lățime: 70%; )
    Conținutul nu este întrerupt dacă nu există suficient spațiu pentru el.
    • Foarte simplu.
    • 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.

    #wrapper( afișare: tabel; ) #celulă (afișare: tabel-celulă; aliniere verticală: mijloc; )
    • Conținut aici #conținut ( poziție: absolut; sus: 50%; înălțime: 240px; margin-sus: -120px; /* minus jumătate din înălțime */ )
    • O anumită linie de text #conținut( înălțime: 100px; înălțime linie: 100px; )
    Conținutul nu este întrerupt dacă nu există suficient spațiu pentru el.
    • Nu taie textul dacă nu se potrivește.
    • 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 la centru vertical, 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:

      Despre

      Reprogramează 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

      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ă obscene 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

      235881 vizualizări

      Dacă tăiați orice site web creat pe baza html, veți vedea o anumită structură stratificată. Mai mult, aspectul său va fi asemănător cu un tort stratificat. Dacă ți se pare așa, atunci cel mai probabil nu ai mâncat de mult. Așa că mai întâi potoliți-vă foamea, apoi vă vom spune cum să centrați un strat div pe site-ul dvs.:

      Avantajele aspectului folosind o etichetă

      Există două tipuri principale de structură a site-ului web:

      • Tabular;
      • Bloc.

      Aspectul tabelar era dominant chiar și în zorii Internetului. Avantajele sale includ precizia poziționării specificate. Dar, cu toate acestea, are deficiențe evidente. Principalele sunt lungimea codului și viteza scăzută de încărcare.

      Când utilizați aspectul tabelului, pagina web nu va fi afișată până când nu este încărcată complet. În timp ce utilizați blocuri div, elementele sunt afișate imediat.

      Pe lângă viteza mare de încărcare, blocarea unui site web vă permite să reduceți de mai multe ori cantitatea de cod HTML. Inclusiv prin utilizarea claselor CSS.

      Cu toate acestea, aspectul tabelar ar trebui utilizat pentru a structura afișarea datelor pe pagină. Un exemplu clasic de utilizare a acestuia este afișarea tabelelor.

      Construcția blocurilor bazată pe etichete este numită și strat cu strat, iar blocurile în sine sunt numite straturi. Acest lucru se datorează faptului că, atunci când sunt utilizate anumite valori de proprietate, acestea pot fi stivuite una peste alta, similar straturilor din Photoshop.

      Ajutoare pentru poziționare

      În aspectul bloc, este mai bine să poziționați straturile folosind foi de stil în cascadă. Principala proprietate CSS responsabilă pentru aspect este float.
      Sintaxa proprietății:
      float: stânga | dreapta | niciunul | moşteni
      Unde:

      • stânga – aliniați elementul la marginea din stânga a ecranului. Curgerea în jurul elementelor rămase are loc în dreapta;
      • dreapta – aliniere la dreapta, curgere în jurul altor elemente – la stânga;
      • nici unul – împachetarea nu este permisă;
      • inherit – moștenește valoarea elementului părinte.

      Să ne uităm la un exemplu ușor de poziționare a div-urilor folosind această proprietate:

      #stânga ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,51,102); ) #right ( lățime: 200px; înălțime: 100px; float: dreapta; fundal: rgb(0,255,153); ) Bloc din stânga Blocul din dreapta


      Acum vom încerca să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are o valoare centrală. Și când dați unui bloc nou o valoare de aliniere la dreapta sau la stânga, acesta este deplasat în direcția specificată. Prin urmare, tot ce rămâne este să setați float: lăsat la toate cele trei blocuri:


      Dar nici aceasta nu este cea mai bună opțiune. Când fereastra este redusă în dimensiune, toate straturile sunt aliniate pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Deci avem nevoie de o modalitate mai bună de a centra div-ul.

      Straturi de centrare

      În exemplul următor, vom folosi un strat container în care vom plasa elementele rămase. Acest lucru rezolvă problema blocurilor care se mișcă unul față de celălalt atunci când dimensiunea ferestrei este modificată. Centrarea containerului în mijloc se face prin setarea proprietăților marginii la zero pentru marginile de la marginea superioară și automat pe părțile laterale (marja: 0 auto):

      #container ( lățime: 600px; margine: 0 automat; ) #stânga ( lățime: 200px; înălțime: 100px; flotant: stânga; fundal: rgb(255,51,102); ) #dreapta ( lățime: 200px; înălțime: 100px; flotant : stânga; fundal: rgb(0,255,153); #center ( lățime: 200px; înălțime: 100px; float: stânga; fundal: rgb(255,0,0); )


      Același exemplu arată cum puteți centra un div pe orizontală. Și dacă editați ușor codul de mai sus, puteți obține alinierea verticală a blocurilor. Pentru a face acest lucru, trebuie doar să modificați lungimea stratului de container (reduceți-l). Adică, după editarea clasei sale css ar trebui să arate astfel:

      După schimbare, toate blocurile se vor alinia strict într-un rând la mijloc. Și poziția lor nu se va schimba indiferent de dimensiunea ferestrei browserului. Iată cum arată centrarea verticală a unui div:


      În exemplul următor, am folosit o serie de proprietăți CSS noi pentru a centra straturile în interiorul unui container:

      #container ( lățime: 450 px; înălțime: 150 px; margine: 0 automat; culoarea fundalului: #66CCFF; ) # stânga ( lățime: 100 px; înălțime: 100 px; fundal: rgb(255,51,102); afișaj: bloc inline; vertical-align: middle; margin-left: 35px ) #right ( lățime: 100px; înălțime: 100px; fundal: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center ( lățime: 100px; înălțime: 100px; fundal: rgb(255,0,0); afișare: bloc inline; aliniere verticală: mijloc; margine-stânga: 35px; )


      O scurtă descriere a proprietăților css și a valorilor lor pe care le-am folosit în acest exemplu pentru a centra un div într-un div:

      • display: inline-block – aliniază un element bloc într-o linie și asigură că se înfășoară în jurul altui element;
      • vertical-align: middle – aliniază elementul la mijloc în raport cu părintele;
      • margin-left – setează marginea din stânga.
      Cum se face o legătură dintr-un strat

      Oricât de ciudat ar suna, acest lucru este posibil. Uneori, un bloc div ca link poate fi necesar atunci când amenajați diferite tipuri de meniuri. Să ne uităm la un exemplu practic de implementare a unui strat de legătură:

      #layer1( lățime: 500px; înălțime: 100px; fundal: rgb(51.255.204); border:groove; ) a ( afișare: bloc; text-align: center; înălțime: 100%; culoare: rgb(255,0,51) ; ) Link către site-ul nostru


      În acest exemplu, folosind linia de afișare: bloc, setăm legătura la valoarea unui element bloc. Și pentru ca întreaga înălțime a blocului div să devină o legătură, setați înălțimea: 100%.

      Ascunderea și afișarea elementelor de bloc

      Elementele bloc oferă mai multe oportunități de extindere a funcționalității interfeței decât aspectul tabelar învechit. Se întâmplă adesea ca designul site-ului web să fie unic și ușor de recunoscut. Dar pentru o astfel de exclusivitate trebuie să plătești din lipsă de spațiu liber.

      Acest lucru este valabil mai ales pentru pagina principală, costul publicității pe care este cel mai mare. Prin urmare, se pune problema unde să „împingă” un alt banner publicitar. Și aici nu poți scăpa cu alinierea div-ului la centrul paginii!

      O soluție mai rațională este să ascundă un bloc. Iată un exemplu simplu de astfel de implementare:

      #layer1( display:block; lățime: 500px; înălțime: 100px; fundal: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="bloc"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

      Acesta este butonul magic. Făcând clic pe acesta, se va ascunde sau se va afișa blocul de ascundere.


      În acest exemplu, locația blocurilor div nu se schimbă în niciun fel. Aceasta folosește o funcție JavaScript simplă care modifică valoarea proprietății de afișare css după ce se face clic pe un buton (eveniment onclick).

      sintaxa de afișare:
      afisare: bloc | în linie | inline-block | inline-table | articol-listă | niciunul | rulare | masa | table-caption | tabel-celula | tabel-coloană-grup | tabel-coloană | tabel-subsol-grup | tabel-antet-grup | masă-rând | tabel-rând-grup

      După cum puteți vedea, această proprietate poate lua multe valori. Prin urmare, este foarte util și poate fi folosit pentru poziționarea elementelor. Într-unul dintre exemplele anterioare, am folosit una dintre valorile sale (inline-block) pentru a centra un div într-un div.

      Am folosit două valori pentru proprietatea de afișare pentru a ascunde și a afișa stratul.

      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.

      Notă: 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, cunoașterea înălțimii elementului în acest caz este necesară. 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 deasupra și sub elementul 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.

      Notă: Această metodă funcționează prin setarea căptușelii exterioare a elementului. 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 și decalajul elementului div vid plutitor.

      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ă alegeți pe cel care se potrivește cel mai bine cerințelor.