Alinierea orizontală și verticală a elementelor. Centrarea unui div cu poziție: proprietate absolută sau fixă ​​Centrarea unui div

În CSS, unele lucruri aparent simple nu sunt atât de ușor de făcut. Unul dintre aceste lucruri este alinierea, adică. când un element trebuie poziționat într-un anumit mod față de altul.

Acest articol prezintă câteva soluții gata făcute care vor ajuta la simplificarea activității de centrare a elementelor pe orizontală și/sau verticală.

Notă: Sub fiecare soluție este o listă de browsere care indică versiunile în care funcționează codul CSS specificat.

CSS - Center Align Block

1. Alinierea unui bloc la centrul altuia. În acest caz, primul și al doilea bloc au dimensiuni dinamice.

... ...

Părinte ( poziție: relativ; ) .copil ( poziție: absolut; stânga: 50%; sus: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50% , -50%) -ms-transform: translate(-50%, -50%) -o-transform: translate(-50%, -50%); )

  • Chrome 4.0+
  • Firefox 3.6+
  • Internet Explorer 9+
  • Opera 10.5+
  • Safari 3.1+

2. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni fixe.

Părinte (poziție: relativă; ) .copil (poziția: absolut; stânga: 50%; sus: 50%; /* lățime și înălțime a 2 blocuri */ lățime: 500px; înălțime: 250px; /* Valorile sunt determinate în funcție de pe dimensiunea sa */ /* margin-left = - lățime / 2 */ margin-left: -250px /* margin-top = - înălțime / 2 */ margin-top: -125px )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+

3. Alinierea unui bloc la centrul altuia. În acest caz, al doilea bloc are dimensiuni specificate în procente.

Părinte ( poziție: relativ; ) .copil (poziția: absolut; /* lățime și înălțime a 2 blocuri în % */ înălțime: 50%; lățime: 50%; /* Valorile se determină în funcție de mărimea acestuia în % * / stânga: 25% /* (100% - lățime) / 2 */ sus: 25% /* (100% - înălțime) / 2 */ ;

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 4.0+
  • Opera 7.0+
  • Safari 1.0+
CSS - Aliniere orizontală

1. Alinierea unui element bloc (afișare: bloc) față de altul (în care se află) pe orizontală:

... ...

Blocare ( margine-stânga: automat; margine-dreapta: automat; )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 6.0+
  • Opera 3.5+
  • Safari 1.0+

2. Alinierea orizontală a unui element de linie (display: inline) sau line-block (display: inline-block):

... ...

Părinte ( text-align: center; ) .child (afișare: inline-block; )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+
CSS - Aliniere verticală

1. Centrați un element (display: inline, display: inline-block) față de celălalt (în care se află) în centru. Blocul părinte din acest exemplu are o înălțime fixă, care este setată folosind proprietatea CSS line-height.

... ...

Părinte ( line-height: 500px; ) .child (afișare: inline-block; vertical-align: middle; )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 3.0+
  • Internet Explorer 8.0+
  • Opera 7.0+
  • Safari 1.0+

2. Centrarea unui bloc față de altul pe verticală prin reprezentarea părintelui ca tabel, iar copilul ca o celulă a acestui tabel.

Părinte ( display: table; ) .child ( display: table-cell; vertical-align: middle; )

Browsere care acceptă această soluție:

  • Chrome 1.0+
  • Firefox 1.0+
  • Internet Explorer 8.0+
  • Opera 7.5+
  • Safari 1.0+

Dacă cunoașteți alte trucuri interesante sau soluții utile de aliniere gata făcute, atunci împărtășiți-le în comentarii.

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 aranjare a 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 „float”.
  • 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:

Inline (î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 plutire.

proprietate CSS plutire 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-un float, îl aliniază la marginea stângă (dreapta) a blocului părinte și setează textul și alte elemente să plutească 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 împachetarea*/ înălțimea liniei: 120px; dimensiunea fontului: 40px; fundal: dodgerblue; culoare: alb; margin-sus: 60px; lățime: 320px; /*Remediați lățimea bloc*/)

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

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 codul corect: 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.

Pentru a întrerupe fluxul de elemente dintr-un anumit loc, utilizați linia:

< div style= "clear: both;" >

Î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.

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

Wrap ( lățime: 1310px; /*fixă lățimea învelișului*/ margine: 0 automat; /*centrați-l*/ fundal: gri închis; înălțime: 120px; /*Setați înălțimea wrapperului*/ ) . bblock ( float: stânga; /*Setați împachetarea*/ înălțimea liniei: 120px; /*Înălțimea liniei + centrarea verticală a textului*/ dimensiunea fontului: 40px; fundal: dodgerblue; culoare: alb; lățime: 320px; /*Remediați lățimea blocului*/ margine- dreapta: 10px- aliniere: centru /*Centrați textul pe orizontală*/ ); wrap: last- child ( margin- right: 0px; /*Elimină marginea ultimului div*/ )

Drept urmare, obținem următoarea imagine:

Ei bine, nu puteți lua în considerare toate situațiile practice, așa că să trecem la caracteristicile generale.

Important!!!

Metoda „inline-block”.

Atât elementele inline, cât și cele bloc au avantajele și dezavantajele lor în contextul fiecărei sarcini specifice care este rezolvată. Ce se întâmplă dacă le combini avantajele?

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

afișare: inline-block generează un element block-line, care este în esență inline, dar păstrează proprietățile blocului - vă permite să modificați dimensiunile liniare, să setați marginile, umplutura 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: inline- block; /*Set block-line display*/ width: 180px; /*set the block width*/ background: dodgerblue; ) . șir ( text-align: center; /*Aliniați textul 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:

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

Important!!!

  • 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 */ _height: 250px;

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

Observ că anumite browsere reacționează selectiv la aceste linii (Firefox la prima, IE la celelalte). 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 Metoda tabelului inline-table ), vă permit să efectuați formatarea tabelară a elementelor fără a utiliza tabelele HTML.:

< div class = "wrap" > < div class = "bblock" >Construim< div class = "bblock" >Pentru a plasa blocuri pe orizontală, avem nevoie de un element părinte care are proprietatea< div class = "bblock" >rând< div class = "bblock" >, și elemente copil (celule) având proprietatea

afișare: tabel-celulă

Important!!!

  • 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.
  • Nu aveți capacitatea de a seta proprietatea marginii pentru celulele pseudo tabelului.
  • 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.

    • Foarte des sarcina este de a alinia un bloc în centrul paginii/ecranului și chiar și așa, fără un script Java, fără a seta dimensiuni rigide sau indentări negative și astfel încât barele de defilare să funcționeze pentru părinte dacă blocul își depășește dimensiunea . Există destul de multe exemple monotone pe Internet despre cum să aliniați un bloc la centrul ecranului. De regulă, majoritatea se bazează pe aceleași principii.

    Mai jos sunt principalele modalități de a rezolva problema, avantajele și dezavantajele lor. Pentru a înțelege esența exemplelor, vă recomand să reduceți înălțimea/lățimea ferestrei Rezultate în exemplele de la linkurile furnizate.

    Opțiunea 1: indentare negativă. Poziționăm blocul cu atributele de sus și stânga la 50% și, știind în prealabil înălțimea și lățimea blocului, setăm o marjă negativă, care este egală cu jumătate din dimensiunea blocului. Un mare dezavantaj al acestei opțiuni este că trebuie să numărați indentările negative. De asemenea, blocul nu se comportă corect atunci când este înconjurat de bare de defilare - este pur și simplu tăiat deoarece are margini negative.

    Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; ) .block ( lățime: 250px; înălțime: 250px; poziție: absolut; sus: 50%; stânga : 50%; margine: -125px 0 0 -125px img (lățime maximă: 100%; înălțime: automată; afișare: bloc; margine: 0 auto; margine: niciuna; ) )

    Opțiunea 2. Indentare automată. Mai puțin obișnuit, dar similar cu primul. Pentru bloc, setăm lățimea și înălțimea, poziționăm atributele sus dreapta jos stânga la 0 și setăm marginea automată. Avantajul acestei opțiuni este să lucreze barele de defilare pe părinte, dacă acesta din urmă are setate 100% lățime și înălțime. Dezavantajul acestei metode este setarea rigidă a dimensiunilor.

    Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; ) .block ( lățime: 250px; înălțime: 250px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; margine: auto; înălțime: auto; margine: auto;

    Opțiunea 3. Tabel. Setăm stiluri de tabel pentru părinte și setăm alinierea textului în centru pentru celula părinte. Și dăm blocului un model de bloc de linie. Dezavantajele pe care le primim sunt barele de defilare care nu funcționează și, în general, estetica „emulației” mesei nu este bună.

    Părinte ( lățime: 100%; înălțime: 100%; afișare: tabel; poziție: absolut; sus: 0; stânga: 0; > .interior ( afișare: tabel-celulă; text-align: center; vertical-align: middle; ) ) .bloc ( display: inline-block; img ( display: block; border: none; ) )

    Pentru a adăuga un scroll la acest exemplu, va trebui să adăugați încă un element la design.
    Exemplu: jsfiddle.net/serdidg/fk5nqh52/3.

    Opțiunea 4. Pseudo-element. Această opțiune este lipsită de toate problemele enumerate în metodele anterioare și, de asemenea, rezolvă problemele originale. Ideea este să stilați pseudo-elementul de dinainte pe părinte, și anume 100% înălțime, alinierea la centru și modelul blocului în linie. În același mod, blocul în sine este setat la un model de bloc de linie, aliniat la centru. Pentru a preveni ca blocul să „cade” sub pseudo-element atunci când dimensiunea primului este mai mare decât părintele său, indicăm părintelui spațiu alb: nowrap și font-size: 0, după care anulăm aceste stiluri pentru blocul cu următorul - spatiu alb: normal. În acest exemplu, font-size: 0 este necesar pentru a elimina spațiul rezultat dintre părinte și bloc din cauza formatării codului. Spațiul poate fi îndepărtat în alte moduri, dar este considerat cel mai bine să îl evitați pur și simplu.

    Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; spații albe: nowrap; text-align: center; font-size: 0; &:before ( înălțime: 100%;

    Sau, dacă aveți nevoie ca părintele să ocupe doar înălțimea și lățimea ferestrei, și nu întreaga pagină:

    Părinte ( poziție: fix; sus: 0; dreapta: 0; jos: 0; stânga: 0; overflow: automat; spații albe: nowrap; text-align: center; font-size: 0; &:before ( înălțime: 100%;

    Opțiunea 5. Flexbox. Una dintre cele mai simple și mai elegante moduri este utilizarea flexbox. Nu necesită mișcări inutile ale corpului, descrie destul de clar esența a ceea ce se întâmplă și este foarte flexibil. Singurul lucru care merită reținut atunci când alegeți această metodă este suportul pentru IE de la versiunea 10 inclusiv. caniuse.com/#feat=flexbox

    Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; afișare: flex; align-items: center; align-content: centru; justify-content: centru; overflow: automat; ) .block ( fundal: #60a839; img ( afișare: bloc; chenar: niciunul; ) )

    Opțiunea 6. Transform. Potrivit dacă suntem limitați de structură și nu există nicio modalitate de a manipula elementul părinte, dar blocul trebuie aliniat cumva. Funcția css translate() va veni în ajutor. O valoare de 50% poziționare absolută va poziționa colțul din stânga sus al blocului exact în centru, apoi o valoare de translație negativă va muta blocul în raport cu propriile dimensiuni. Vă rugăm să rețineți că efectele negative pot apărea sub formă de margini neclare sau stil de font. De asemenea, această metodă poate duce la probleme cu calcularea poziției blocului folosind java-script Uneori, pentru a compensa pierderea de 50% din lățimea din cauza utilizării proprietății CSS stânga, regula specificată pentru bloc. ajutor: margine-dreapta: -50% .

    Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; overflow: automat; ) .block (poziție: absolut; sus: 50%; stânga: 50%; transform: translate( -50%, -50%) img ( display: block; ) )

    Opțiunea 7. Buton. Opțiune de utilizator, în cazul în care blocul este încadrat într-o etichetă de buton. Butonul are proprietatea de a centra tot ce se afla in interiorul lui, si anume elementele modelului inline si block-line (inline-block). În practică, nu recomand să-l folosești.

    Părinte ( lățime: 100%; înălțime: 100%; poziție: absolut; sus: 0; stânga: 0; overflow: automat; fundal: niciunul; chenar: niciunul; contur: niciunul; ) .block ( afișare: bloc inline; img (afișare: bloc;; chenar: niciunul; ) )

    Bonus Folosind ideea celei de-a patra opțiuni, puteți seta margini externe pentru bloc și, în același timp, acestea din urmă vor fi afișate adecvat înconjurate de bare de defilare.
    Exemplu: jsfiddle.net/serdidg/nfqg9rza/2.

    De asemenea, puteți alinia imaginea la centru și, dacă imaginea este mai mare decât cea părinte, scalați-o la dimensiunea părintelui.
    Exemplu: jsfiddle.net/serdidg/nfqg9rza/3.
    Exemplu cu o imagine mare:

    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ă așa crezi, 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 dezavantaje 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 de 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 următorul exemplu, am folosit o serie de noi proprietăți CSS 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 el, va ascunde sau 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).

    CSS - Aranjarea și alinierea la centru a paginilor site-ului Web Alinierea și alinierea la centru a paginilor site-ului web este un efort creativ și provoacă adesea dificultăți începătorilor. Deci, să vedem cum se face. Să presupunem că vrem să facem o pagină cu următoarea structură:

    Pagina noastră este formată din patru blocuri: antet, meniu, conținut și subsol. Pentru a centra pagina, vom plasa aceste patru blocuri într-un singur bloc principal:

    Antetul site-ului

    Conţinut

    Partea de jos a site-ului

    Folosind această structură ca exemplu, vom lua în considerare mai multe opțiuni.

    Dispunerea și centrarea unui site de cauciuc

    La amenajarea unui site de cauciuc, unitatea principală de măsură utilizată este -%, deoarece locul ar trebui să se întindă pe lățime și să ocupe tot spațiul liber.

    Prin urmare, lățimea blocurilor „antet” și „subsol” va fi de 100% din lățimea ecranului. Lățimea blocului „meniu” să fie de 30%, iar blocul „conținut” să fie situat lângă blocul „meniu”, adică. trebuie sa aiba o margine din stanga (marja-stanga) cu o latime egala cu latimea blocului „meniu”, i.e. 30%.

    Pentru a face blocurile „meniu” și „conținut” unul lângă altul, să facem blocul „meniu” să plutească și să-l împingem spre marginea stângă. Vom seta și culorile de fundal pentru blocurile noastre. Acum să scriem toate acestea în foaia de stil (pe pagina style.css)

    #header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #meniu( background:#6173cb; float :left; width:300px; text-align:center; #3e4982; width:100px;

    Înălțimea blocurilor a fost stabilită condiționat, astfel încât rezultatul să fie vizibil. Uită-te la pagina noastră în browser:

    Dacă modificați dimensiunea ferestrei browser, lățimea tuturor blocurilor se va modifica. Acest lucru nu este întotdeauna convenabil, deoarece... Când blocul de meniu este întins, apare spațiu gol. Prin urmare, lățimea blocului „meniu” este adesea fixă, așa că haideți să facem același lucru. Pentru a face acest lucru, înlocuiți valorile proprietăților corespunzătoare din foaia de stil:

    ... #meniu( fundal:#6173cb; float:stânga; lățime:200px; înălțime:300px; ) #conținut( fundal:#ffffff; margin-left:200px; înălțime:300px; ) ...

    Acum pagina noastră se întinde mai natural. Cu aspectul fluid, paginile ocupă întreaga lățime a ecranului, așa că nu este necesară alinierea paginilor.

    Dar dacă doriți, puteți face ca pagina să aibă o umplutură egală în stânga și dreapta ecranului. Pentru a face acest lucru, trebuie să adăugați un stil la blocul „principal”, care este un container pentru toate celelalte blocuri:

    Acum pagina noastră arată astfel:

    Dispunerea și centrarea site-ului, lățime fixă

    În acest caz, va trebui să setăm dimensiuni fixe pentru blocurile noastre:

    #principal( lățime:800px; ) #header( fundal:#3e4982; lățime:800px; înălțime:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #meniu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; înălțime:300px; text-align:center; dimensiune: 14px;

    Acum pagina noastră este apăsată în marginea stângă a ecranului.

    În acest caz, alinierea la centru a paginilor site-ului se poate face după cum urmează. Să ne amintim că pagina noastră are o etichetă „corp”, căreia i se poate atribui și o lățime și o umplutură.

    Să facem asta: dați etichetei „body” o lățime de 800 de pixeli (cum ar fi blocul „principal”) și o umplutură-stânga de 50%. Apoi, întregul conținut al blocului „principal” va fi afișat în partea dreaptă a ecranului (adică de la mijloc la dreapta):

    Pentru ca blocul nostru „principal” să fie situat în mijlocul ecranului, mijlocul său trebuie să coincidă cu mijlocul etichetei „corp”. Aceste. trebuie să mutați blocul „principal” la stânga cu jumătate din dimensiunea sa. Lățimea blocului „principal” este de 800 de pixeli, ceea ce înseamnă că trebuie să îi setați proprietatea „margin-left:-400px”. Da, această proprietate poate lua valori negative, apoi marginea din stânga este redusă (adică deplasată la stânga). Și exact de asta avem nevoie.

    Foaia de stil arată acum astfel:

    body( lățime:800px; padding-left:50%; ) #principal( lățime:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; culoare:#FFFFFF; font-size:24px; padding-top:40px; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( background:#3e4982; clear:both; lățime:800px;text-align:center;font-size:14px;

    Și pagina noastră din browser se află exact în mijloc:

    Am analizat două opțiuni pentru centrarea paginilor site-ului, de fapt, nu sunt dogme. Puteți experimenta și veni cu propria dvs. versiune, doar verificați cum funcționează în diferite browsere. Din păcate, ceea ce se afișează bine în FireFox sau Opera se poate afișa complet de neînțeles în IE și invers. Și trebuie să ne amintim asta.

    Mult succes în căutarea ta creativă!

    

    Dacă ați găsit acest site util, vă rugăm să consultați celălalt site



    Vă recomandăm să citiți