Alinierea la centru a blocurilor css. Poziționare absolută și marje negative. Pentru a alinia vertical un bloc în cadrul unui bloc părinte
Când așezați o pagină, este adesea necesar să efectuați alinierea la centru folosind metoda CSS: de exemplu, centrarea blocului principal. Există mai multe opțiuni pentru a rezolva această problemă, fiecare dintre acestea, mai devreme sau mai târziu, trebuie să fie folosită de orice designer de layout.
Centrare alinierea textului
Adesea, în scopuri decorative, este necesar să setați textul la aliniere la centru CSS în acest caz vă permite să reduceți timpul de aspect. Anterior, acest lucru se făcea folosind atribute HTML, dar acum standardul cere ca textul să fie aliniat folosind foi de stil. Spre deosebire de blocuri, pentru care trebuie să modificați marginile, în Alinierea CSS Centrarea textului se face folosind o singură linie:
- text-align:center;
Această proprietate este moștenită și transmisă de la părinte către toți descendenții. Afectează nu numai textul, ci și alte elemente. Pentru a face acest lucru, acestea trebuie să fie inline (de exemplu, span) sau inline-block (orice blocuri care sunt date proprietate de afișare:bloc). Această ultimă opțiune vă permite, de asemenea, să modificați lățimea și înălțimea elementului și să reglați indentările mai flexibil.
Adesea, pe pagini, alinierea este atribuită etichetei în sine. Acest lucru invalidează imediat codul, deoarece W3C a depreciat atributul align. Utilizarea acestuia pe o pagină nu este recomandată.
Alinierea unui bloc la centru
Dacă trebuie să setați alinierea div centrat, CSS are destul de multe de oferit mod convenabil: folosiți marginile exterioare. Indentațiile pot fi setate atât pentru elementele bloc, cât și pentru elementele bloc inline. Valoarea proprietății ar trebui să fie 0 (căptușeală verticală) și automată (căptușeală orizontală automată):
- margine:0 auto;
Acum această opțiune este recunoscută ca fiind absolut valabilă. Folosirea padding-ului extern vă permite și să setați imaginea să fie centrată: vă permite să rezolvați multe probleme legate de poziționarea unui element pe pagină.
Aliniați un bloc la stânga sau la dreapta
Uneori, alinierea la centru CSS nu este necesară, dar trebuie să plasați două blocuri unul lângă altul: unul pe marginea stângă, celălalt pe dreapta. Pentru asta există proprietate de plutire, care poate lua una dintre cele trei valori: stânga, dreapta sau niciunul. Să presupunem că aveți două blocuri care trebuie așezate unul lângă altul. Atunci codul va fi astfel:
- .stânga (float:left;)
- .right(float:right)
Dacă există și un al treilea bloc, care ar trebui să fie situat sub primele două blocuri (de exemplu, un subsol), atunci trebuie să i se atribuie proprietatea clear:
- .stânga (float:left;)
- .right(float:right)
- subsol (clear:both)
Cert este că blocurile cu clasele stânga și dreapta cad din fluxul general, adică toate celelalte elemente ignoră însăși existența elementelor aliniate. Proprietatea clear:both permite subsolului sau oricărui alt bloc să vadă elementele care au căzut din flux și interzice plutirea atât în stânga, cât și în dreapta. Prin urmare, în exemplul nostru, subsolul se va deplasa în jos.
Aliniere verticală
Există momente în care nu este suficient să setați alinierea la centru folosind metode CSS, de asemenea, trebuie să schimbați pozitie verticala bloc de copii. Orice element în linie sau în bloc poate fi imbricat la marginea de sus sau de jos, în mijlocul unui element părinte sau în orice locație. Cel mai adesea, blocul trebuie aliniat la centru pentru aceasta, se folosește atributul vertical-align. Să presupunem că există două blocuri, unul imbricat în celălalt. în care Unitate interioară— element inline-block (afișare: inline-block). Trebuie să aliniați blocul copil pe verticală:
- aliniere de sus - .child(vertical-align:top);
- aliniere la centru - .child(vertical-align:middle);
- aliniere de jos - .child(vertical-align:bottom);
Nici alinierea textului, nici alinierea verticală nu afectează elementele blocului.
Posibile probleme cu blocurile aliniate
Uneori, centrarea unui div folosind CSS poate cauza mici probleme. De exemplu, când folosiți float: să presupunem că există trei blocuri: .first, .second și .third. Al doilea și al treilea bloc se află în primul. Elementul cu clasa secundă este aliniat la stânga, iar ultimul bloc este aliniat la dreapta. După ce s-au echilibrat, ambele au căzut din flux. Dacă elementul părinte nu are un set de înălțime (de exemplu, 30em), atunci nu se va mai întinde la înălțimea blocurilor sale copil. Pentru a evita această eroare, utilizați un „spacer” - un bloc special care vede .second și .third. Cod CSS:
- .second(float:left)
- .a treia (float:right)
- .clearfix(înălțime: 0; clar: ambele;)
Pseudo-clasa:after este adesea folosită, ceea ce vă permite, de asemenea, să returnați blocurile la locul lor prin crearea unui pseudo-spacer (în exemplu, un div cu clasa container se află în interior.first și conține.stânga și.dreapta) :
- .left(float:left)
- .right(float:right)
- .container:după(conținut:""; afișare:tabel; clear:both;)
Opțiunile de mai sus sunt cele mai comune, deși există mai multe variante. Puteți găsi întotdeauna cel mai simplu și mai convenabil mod de a crea un pseudo-distanțier prin experimentare.
O altă problemă pe care o întâmpină adesea designerii de layout este alinierea liniilor. elemente de bloc. Un spațiu este adăugat automat după fiecare dintre ele. Ajută să faci față acestui lucru proprietatea marjei, căruia i se acordă o marjă negativă. Există și alte metode care sunt folosite mult mai puțin frecvent: de exemplu, zeroing În acest caz, font-size: 0 este scris în proprietățile elementului părinte. Dacă există text în interiorul blocurilor, atunci în proprietăți elemente de bloc inline se întoarce deja marimea corecta font. De exemplu, font-size:1em. Această metodă nu este întotdeauna convenabilă, așa că opțiunea cu indentări externe este mult mai des folosită.
Alinierea blocurilor vă permite să creați pagini frumoase și funcționale: aceasta include aspectul aspectului general, aranjarea produselor în magazinele online și fotografii de pe un site web de cărți de vizită.
Foarte des sarcina este de a alinia un bloc la centrul paginii / ecranului și chiar și așa, fără un script Java, fără o sarcină dimensiuni rigide sau indentări negative, astfel încât barele de defilare să funcționeze și 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ționare bloc atribute sus și stânga cu 50% și știind în prealabil înălțimea și lățimea blocului, setăm marja negativa, care este jumătate din dimensiune bloc. Un minus imens această opțiune este că trebuie să numărați umplutura negativă. De asemenea bloc 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 setați lățimea și înălțimea, poziția cu atributele de sus dreapta jos stânga la 0 și setați marginea automată. Avantajul acestei opțiuni este utilizarea barelor de defilare mamă, dacă acesta din urmă are 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.
Sa intrebam mamă stiluri de tabel, celulă mamă Setați alinierea textului la centru. A bloc setați modelul bloc de linie. Dezavantajele pe care le primim sunt că nu funcționează barele de defilare și, în general, estetica „emulației” mesei nu este.
Părinte ( lățime: 100%; înălțime: 100%; afișare: tabel; poziție: absolut; sus: 0; stânga: 0; > .intern ( 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 nu are toate problemele enumerate în metode anterioare, și, de asemenea, rezolvă sarcinile stabilite inițial. Ideea este că mamă setați stiluri pseudo elementînainte, și anume 100% înălțime, aliniere la centru și model de bloc inline. Este la fel cu bloc se plasează un model de bloc de linii, centrat. La bloc nu a „căzut” sub pseudo element, când dimensiunile primului sunt mai mari decât mamă, indicați mamă spații albe: nowrap și font-size: 0, după care bloc anulați aceste stiluri cu următoarele - spații albe: normal. ÎN în acest exemplu font-size: 0 este necesar pentru a elimina spațiul rezultat dintre mamăȘi bloc datorită 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 aceasta metoda- suport 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 element părinte, dar blocul trebuie aliniat cumva. va veni în ajutor funcția css Traduceți() . 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ă acestea pot pluti efecte negative sub formă de margini neclare sau stil de font. De asemenea metoda similara poate duce la probleme cu calcularea poziției blocului folosind java-script Uneori pentru a compensa pierderea de 50% din lățimea folosind css proprietăţi rămase Regula specificată pentru bloc poate ajuta: margin-dreapta: -50%; .
Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; overflow: automat; ) .block (poziția: absolut; sus: 50%; stânga: 50%; transform: translate( -50%, -50%) img (afișare: bloc; ) )
Opțiunea 7. Buton.
Opțiunea utilizator azproduction unde blocî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; ) )
Primă
Folosind ideea celei de-a patra opțiuni, puteți seta marje externe pentru bloc, iar acesta din urmă va fi afișat corespunzător, înconjurat de bare de defilare.Exemplu: jsfiddle.net/serdidg/nfqg9rza/2.
De asemenea, puteți alinia imaginea la centru și dacă imaginea este mai mare mamă, scalați-l la dimensiune mamă.
Exemplu: jsfiddle.net/serdidg/nfqg9rza/3.
Exemplu cu o imagine mare:
O zi bună, abonați și cititori ai acestei publicații. Astăzi vreau să intru în detalii și să vă spun cum să centrați textul în CSS. În unele articole anterioare am atins indirect Acest subiect, deci aveți niște cunoștințe în acest domeniu.
Cu toate acestea, în această publicație vă voi spune despre în toate modurile posibile alinierea obiectelor și, de asemenea, explicați cum să indentați și linii roșii în paragrafe. Deci, să începem să învățăm materialul!
HTML și descendenții săi și aliniați
Această metodă nu este aproape niciodată folosită, deoarece a fost înlocuită cu instrumente de foaie de stil în cascadă. Cu toate acestea, să știi că o astfel de etichetă există nu te va răni.
Referitor la validare ( acest termen este descrisă în detaliu în articolul „”), apoi specificația html în sine condamnă utilizarea < centru>, întrucât pentru valabilitate este necesară folosirea unui tranzitiv DOCTYPE>.
Acest tippermite trecerea elementelor interzise.
Acum să trecem la atribut alinia. Setează alinierea orizontală a obiectelor și se potrivește după declararea etichetei. De obicei, poate fi folosit pentru a alinia conținutul la stânga ( stânga), de-a lungul marginii din dreapta ( dreapta), centrat ( centru) și după lățimea textului ( justifica).
Mai jos voi da un exemplu în care voi plasa în centru poza și paragraful.
Acest conținut va fi centrat.
Vă rugăm să rețineți că pentru imagine, atributul pe care îl analizăm are semnificații ușor diferite.
În exemplul pe care l-am folosit aliniază="mijloc". Datorită acestui fapt, imaginea a fost aliniată astfel încât propoziția să fie situată clar în mijlocul imaginii.
Instrumente de centrare în css
Proprietățile CSS concepute pentru a alinia blocurile, textul și conținutul grafic sunt folosite mult mai des. Acest lucru se datorează în primul rând confortului și flexibilității implementării stilurilor.
Deci, să începem cu prima proprietate a centrarii textului - aceasta este text-alinia.
Funcționează în același mod ca align in . Dintre cuvintele cheie puteți alege unul dintre lista generala sau moștenesc caracteristicile unui strămoș ( moşteni).
Aș dori să notez că în css3 puteți seta încă 2 parametri: start– în funcție de regulile de scriere a textului (de la dreapta la stânga sau invers), setează alinierea la stânga sau la dreapta (asemănător lucrării la stânga sau la dreapta) și Sfârşit– opusul startului (la scrierea textului de la stânga la dreapta acţionează ca la dreapta, la scrierea de la dreapta la stânga – stânga).
Propoziție din dreapta
Propoziție folosind sfârșitul
O să vă povestesc despre cip mic. La selectarea unei valori justifica ultima linie poate atârna inestetic de jos. Pentru a-l poziționa, de exemplu, în centru, puteți folosi proprietatea text-align-last.
Pentru a alinia vertical conținutul site-ului sau celulele tabelului, utilizați proprietatea vertical-align. Mai jos am descris principalul Cuvinte cheie element.
| Cuvânt cheie | Scop |
| de bază | Specifică alinierea la o linie strămoșească, numită linie de bază. Dacă obiectul strămoș nu are o astfel de linie, atunci alinierea are loc de-a lungul marginii inferioare. |
| mijloc | Mijlocul obiectului mutat este aliniat la linia de bază, la care se adaugă podeaua înălțimii elementului părinte. |
| fund | Partea de jos a conținutului selectat se ajustează la partea de jos a obiectului de sub acesta. |
| top | Similar cu fundul, numai cu top parte obiect. |
| super | Face superscriptul caracterului. |
| sub | Face elementul indice. |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
C ÎN E TDESPRELA
|
Indentări
Și în sfârșit ajungem la liniuțele de paragraf. ÎN limbajul css folosit proprietate specială intitulat text-indentare.
Cu ajutorul acestuia puteți face atât o linie roșie, cât și o proeminență (trebuie să specificați o valoare negativă).
Pentru a crea o linie roșie trebuie să cunoașteți doar un parametru.
Aceasta este proprietatea text-indent simplă.
Centrarea elementelor pe verticală cu folosind CSS este o sarcină care prezintă unele dificultăți pentru dezvoltatori. Cu toate acestea, există mai multe metode de rezolvare, care sunt destul de simple. ÎN această lecție 6 variante prezentate centrare verticală conţinut.
Sa incepem cu descriere generala sarcini.
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 instalare automată marginile din stânga și din dreapta.
Majoritatea oamenilor folosesc proprietatea text-align: , accesați proprietatea vertical-align pentru a centra vertical. Totul pare destul de logic. Dacă ați folosit șabloane de tabel, probabil că ați folosit pe scară largă atributul valign, care întărește credința că alinierea verticală calea cea buna la rezolvarea problemei.
Dar atributul valign funcționează numai pe celulele tabelului. A proprietatea de aliniere verticală foarte asemănătoare cu el. 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 de aliniere verticală nu funcționează pe elementele la nivel de bloc (de exemplu, paragrafele din interiorul element div). Această situație poate face să 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
Aceasta metoda 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.
Mod implicit spatiu liber vor fi distribuite uniform deasupra și dedesubtul textului. Și linia va fi centrată vertical. Adesea se face înălțimea liniei înălțime egală element .
HTML:
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. Orice valoare poate fi folosită marime mai mare font text.
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; )
Sens proprietățile înălțimii liniei 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ă: Tabel CSS nu este același lucru cu un tabel HTML.
HTML:
CSS:
#părinte (afișare: tabel;) #copil (afișare: tabel-celulă; vertical-align: mijloc; )
Instalăm ieșire tabelară pentru elementul div părinte și afișați 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:
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:
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 marginilor pentru a se 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ă, setați în mod explicit liniuțe egale deasupra și sub elementul părinte.
HTML:
CSS:
#părinte ( umplutură: 5% 0; ) #copil ( umplutură: 10% 0; )
În cod Exemplu CSS Marginile de sus și de jos sunt setate 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.
Pentru a redimensiona dinamic elementele, utilizați unități relative măsurători. 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 unui element. De asemenea, puteți utiliza margini în cadrul unui element. Decizia de a folosi margini sau umplutură 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:
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 clar: ambele , dar este suficient să folosiți aceeași direcție ca decalajul unui element 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ă analizezi proiectul și să-l alegi pe cel care se potrivește cel mai bun mod conform cerinţelor.
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ționare bloc folosind atributele de sus și din stânga cu 50% și cunoscând înălțimea și lățimea blocului în avans, setați o marjă negativă, care este egală cu jumătate din dimensiune bloc. Un mare dezavantaj al acestei opțiuni este că trebuie să numărați indenturile negative. De asemenea bloc 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 utilizarea barelor de defilare mamă, dacă acesta din urmă are 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.
Sa intrebam mamă stiluri de tabel, celulă mamă Setați alinierea textului la centru. A bloc setăm modelul blocului de linii. Dezavantajele pe care le primim sunt că nu funcționează barele de defilare și, în general, estetica „emulației” mesei nu este.
Părinte ( lățime: 100%; înălțime: 100%; afișare: tabel; poziție: absolut; sus: 0; stânga: 0; > .intern ( 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 că mamă setați stiluri pseudo elementînainte, și anume 100% înălțime, aliniere la centru și model de bloc inline. Este la fel cu bloc se plasează un model de bloc de linii, centrat. La bloc nu a „căzut” sub pseudo element, când dimensiunile primului sunt mai mari decât mamă, indicați mamă spații albe: nowrap și font-size: 0, după care bloc anulați aceste stiluri cu următoarele - spații albe: normal. În acest exemplu, font-size: 0 este necesar pentru a elimina spațiul rezultat dintre mamăȘi bloc datorită 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 la calcularea poziției blocului folosind java-script Uneori, pentru a compensa pierderea de 50% din lățime din cauza utilizării proprietăți css stânga poate fi ajutată de regula specificată pentru bloc: margin-right: -50%; .
Părinte ( lățime: 100%; înălțime: 100%; poziție: fix; sus: 0; stânga: 0; overflow: automat; ) .block (poziția: absolut; sus: 50%; stânga: 50%; transform: translate( -50%, -50%) img (afișare: bloc; ) )
Opțiunea 7. Buton.
Opțiunea utilizator unde blocî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; ) )
Primă
Folosind ideea celei de-a patra opțiuni, puteți seta marje externe pentru bloc, iar acesta din urmă va fi afișat corespunzător, înconjurat de bare de defilare.Exemplu: jsfiddle.net/serdidg/nfqg9rza/2.
De asemenea, puteți alinia imaginea la centru și dacă imaginea este mai mare mamă, scalați-l la dimensiune mamă.
Exemplu: jsfiddle.net/serdidg/nfqg9rza/3.
Exemplu cu o imagine mare:
