Când așezați o pagină, este adesea necesară alinierea Centru CSS-mod: 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 necesită alinierea textului 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 au setată proprietatea display: block). Ultima varianta De asemenea, vă permite să modificați lățimea și înălțimea elementului și să ajustați mai flexibil indentările.
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ă centrați un div, CSS vă poate oferi destul de mult 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ă proprietatea plutitoare, 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 clase 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 poziția verticală a blocului copil. 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);
Pe elemente de bloc nici text-align, nici vertical-align nu au niciun efect.
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. Un element cu clasa secundă este aliniat la stânga și ultimul bloc- pe 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ă, care 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.left și.right) :
- .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 elementelor în bloc. Un spațiu este adăugat automat după fiecare dintre ele. Proprietatea marjei, care este setată la o liniuță negativă, ajută la rezolvarea acestui lucru. Există și alte metode care sunt folosite mult mai rar: 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ățile elementelor inline-block acesta este deja returnat 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ă.
Alinierea textului determină aspectul său și orientarea marginilor paragrafului și poate fi la stânga, la dreapta, centrat sau justificat. În tabel Figura 1 prezintă opțiuni pentru alinierea unui bloc de text.
| Alinierea la stânga | Alinierea la dreapta | Alinierea la centru | Justificare |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Cea mai comună opțiune este aliniată la stânga, unde textul din stânga este împins până la margine, în timp ce textul din dreapta rămâne zimțat. Alinierea la dreapta și la centru este folosită în principal în titluri și subtitluri. Rețineți că atunci când utilizați justificarea, pot apărea spații mari între cuvintele din text, ceea ce nu este foarte atractiv.
Eticheta de paragraf este utilizată de obicei pentru a seta alinierea textului
Cu atributul align, care specifică metoda de aliniere. De asemenea, este posibil să aliniați un bloc de text folosind o etichetă
| cod HTML | Descriere |
|---|---|
| Adaugă alineat nou text, aliniat la stânga în mod implicit. Mici indentări verticale sunt adăugate automat înainte și după paragrafe. | |
Text |
Alinierea la centru. |
Text |
Alinierea la stânga. |
Text |
|
Text |
Alinierea la lățime. |
| Dezactivează împachetarea automată a liniilor, chiar dacă textul este mai larg decât fereastra browserului. | |
| Text |
Permite browserului să întrerupă o linie în locația specificată, chiar dacă este utilizată o etichetă |
Text
|
Alinierea la centru. |
Text
|
Alinierea la stânga. |
Text
|
Alinierea la dreapta. |
Text
|
Alinierea la lățime. |
Alinierea la stânga a elementelor este setată implicit, deci nu este nevoie să o specificați din nou. Deci align="left" poate fi omis.
Diferența dintre paragraf (tag
) și etichetați
Atributul de aliniere este destul de universal și poate fi aplicat nu numai textului principal, ci și titlurilor precum
. Exemplul 1 arată cum să setați alinierea într-un astfel de caz.
Exemplul 1: Alinierea textului
Cum să prinzi un leu?
Metoda forței brute
Împărțim deșertul într-o serie de zone elementare, a căror dimensiune coincide cu dimensiunile per total leu, dar mai mic decât dimensiunea cuștii. În continuare, prin simpla căutare determinăm zona în care se află leul, ceea ce duce automat la capturarea acestuia.
Metoda dihotomiei
Împărțim deșertul în două jumătăți. Într-o parte este un leu, în cealaltă nu există niciunul. Luăm jumătatea în care se află leul și o împărțim din nou în jumătate. Repetăm acest lucru până când leul este prins.
Rezultatul exemplului este prezentat în Fig. 1.
Orez. 1. Aliniați textul la dreapta și la stânga
ÎN în acest exemplu Titlul este aliniat la centrul ferestrei browserului, paragraful evidențiat este aliniat la dreapta, iar corpul textului este aliniat la stânga.
Există mai multe moduri fundamental diferite de a centra un obiect pe verticală folosind CSS, cu toate acestea, dificultatea poate fi în alegerea celui potrivit. 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
pro
- Conținutul se poate schimba dinamic înălțimea (înălțimea nu este definită în CSS).
- Conținutul nu este întrerupt dacă nu există spațiu suficient pentru el.
Minusuri
- Nu funcționează în IE 7 sau mai puțin
- O mulțime de etichete imbricate
a 2-a metoda
Această metodă folosește absolut poziționarea div-a, pentru care top este setat la 50%, iar marginea superioară (margin-top) este minus jumătate din înălțimea conținutului. Aceasta implică faptul că obiectul trebuie să aibă o înălțime fixă, care este definită în stilurile CSS.
Deoarece înălțimea este fixă, puteți seta overflow:auto; pentru un div care conține conținut, astfel, dacă conținutul nu se potrivește, vor apărea bare de defilare.
pro
- Funcționează în toate browserele.
- Nu există cuibări inutile.
Minusuri
- Când nu este suficient spațiu, conținutul dispare (de exemplu, div-ul este în interiorul corpului și utilizatorul a făcut ferestrele mai mici, caz în care barele de defilare nu vor apărea.
a 3-a metoda
În această metodă, vom încheia conținutul div cu un alt div. Să-i setăm înălțimea la 50% (înălțime: 50%;) și marginea de jos la jumătate din înălțime (margin-bottom:-contentheight;). Conținutul va pluti și va fi centrat.
pro
- Funcționează în toate browserele.
- Când nu există suficient spațiu (de exemplu, când fereastra este redusă), conținutul nu este decupat, vor apărea bare de defilare.
Minusuri
- 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ă aliniere orizontala centrat pe elementul bloc lățime fixă(marja: 0 auto;).
pro
- Foarte simplu.
Minusuri
- Nu funcționează în Internet Explorer
- Conținutul va fi tăiat fără bare de defilare dacă nu există suficient spațiu în container.
Metoda a 5-a
Folosind această metodă, puteți centra o linie de text. Pur și simplu setăm înălțimea textului (linie-înălțime) egală cu înălțimea elementului (înălțimea). După aceasta, linia va fi afișată în centru.
pro
- Funcționează în toate browserele.
- Nu taie textul dacă nu se potrivește.
Minusuri
- 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 aliniere verticală centrat, haideți să facem un site web simplu, care în cele din urmă va arăta astfel:
Pasul 1
Este întotdeauna bine să începeți marcaj semantic. Pagina noastră va fi structurată după cum urmează:
- #floater (pentru a centra conținutul)
- #centrat (element central)
- #latură
- #siglă
- #nav (lista
- #conţinut
- #bottom (pentru drepturi de autor și toate astea)
Să scriem următorul marcaj html:
O companie centrată O companieTitlul paginii
Reproiectează holistic externalizarea cu valoare adăugată după colaborarea centrată pe proces și partajarea ideilor. Simplificați din punct de vedere energetic piețele de nișă cu impact prin imperativele activate. Predominați holistic inovația premium după scenarii convingătoare. Recaptiualizați fără probleme standarde înalte în capitalul uman cu produse fabricate de vârf. Distribuiți în mod distinct schemele conforme cu standardele înaintea vortalurilor robuste. Recaptiualizați în mod unic gradul de pregătire 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; ) ; jos: 0; umplutură: 20px;
Înainte de a ne alinia centrul de conținut, trebuie să setăm înălțimea corpului și html la 100%. Deoarece înălțimea este calculată fără umplutură internă și externă (padding și margine), le setăm (padding) la 0, astfel încât să nu existe bare de defilare.
Marja de jos pentru un element „plutitor” este egală cu minus jumătate din înălțimea conținutului (400px), și anume -200px ;
Pagina ta ar trebui să arate acum cam așa:
#latime element centrat 80%. Acest lucru face site-ul nostru mai restrâns pe ecranele mici și mai larg pe cele mai mari. majoritatea site-urilor arată indecent pe noile monitoare largi din colțul din stânga sus. Proprietățile min-width și max-width limitează, de asemenea, pagina noastră, astfel încât să nu pară prea lată sau prea îngustă. Internet Explorer nu acceptă aceste proprietăți. Trebuie să-l setați la o lățime fixă.
Deoarece elementul #centered este setat la position:relative, putem folosi poziționare absolută elemente din interiorul acestuia. Apoi setați overflow:auto; pentru elementul #content, astfel încât să apară bare de defilare dacă conținutul nu se potrivește.
Pasul 3
Ultimul lucru pe care îl vom face este să adăugăm ceva stil pentru a face pagina să arate puțin mai atractivă. Să începem cu meniul.
#nav ul ( list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( display: block; culoare de fundal: #e8e8e8; margine: 0; margine de jos: 1px; conținut: „"” : #777; ) #nav li a:hover::after ( marjă: 0 0 0 7px; culoare: #f93; ) #nav li a:activ ( padding: 8px 7px 7px; )
Primul lucru pe care l-am făcut pentru a face meniul să arate mai bine a fost să eliminăm marcatorii prin setarea atributului list-style:none și, de asemenea, să setăm umplutura și umplutura, deoarece acestea variază foarte mult în mod implicit în diferite browsere.
Observați că am specificat apoi că legăturile ar trebui redate ca elemente bloc. Acum, când sunt afișate, acestea sunt întinse pe toată lățimea elementului în care se află.
Un alt lucru interesant pe care l-am folosit pentru meniu sunt pseudo-clasele:before și:after. Ele vă permit să adăugați ceva înainte și după un element. Acest mod bun adăugați 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 de unele browsere, cu excepția utilizării 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
237154 vizualizări
Până acum, am aliniat elementele doar la stânga. Mai precis, tu și cu mine nu am făcut asta deloc, iar browserul însuși aliniază elementele la stânga în mod implicit. Desigur, ar fi prea plictisitor să aliniezi totul la stânga. Prin urmare, există diferite căi alinierea la centru și la dreapta.
Alinierea elementelor este ceva ce trebuie doar să știți când faceți acest lucru. Primul lucru pe care trebuie să-l faceți este să introduceți o pagină simplă.
A fost odată o etichetă
Nu te sfătuiesc să-l folosești acum, din cauza prezenței mai multor metode moderne, dar nu pot să nu menționez asta. Este foarte, foarte simplu de utilizat. Tot ceea ce ai nevoie pentru a fi centrat, plasezi în interiorul acestei etichete. De exemplu, aici aliniem direcția de nivel 1 la centru.
Puteți adăuga o imagine, de asemenea, aliniată la centru, să mergem și la rândul următor folosind eticheta
:
Titlu de nivel 1, aliniat la centru
A fost o etichetă
, care este deja depășit, în plus, contrar așteptărilor tale de etichete , dar ce zici de cel potrivit? Pentru a rezolva această problemă, dezvoltatorii au venit cu metoda universala alinierea elementelor HTML. Metoda este de a folosi așa-numitele containere, care sunt create folosind eticheta
. Adică, tot ceea ce trebuie plasat într-un anumit container este plasat în interiorul etichetei. Și această etichetă are deja atributul " alinia", a cărui valoare determină poziția acestui container. Există trei valori: " stânga", "centru", "dreapta„. În mod implicit, este „ stânga„Cu toate acestea, cred că acest lucru nu vă surprinde.Să scriem același lucru acum cod HTML, dar folosind containere, în plus, să ne aliniem nu la centru, ci la dreapta.
După cum puteți vedea, totul funcționează. Vă sfătuiesc să modificați și valorile atributului " alinia" pentru a analiza alte tipuri de aliniere a conținutului containerului.
Un alt mod de a alinia elementele HTML- acestea sunt tabele, dar acest subiect merită o discuție separată, așa că vom vorbi despre el într-unul dintre articolele următoare.
Pentru moment, pagina ta ar trebui să arate astfel:
Titlu de nivel 1, aliniat la centru
Titlu de nivel 1, aliniat la dreapta
Cu stimă, Mihail Rusakov.
P.S. Dacă vrei să afli mai multe despre HTML apoi uita-te la a mea curs gratuit cu un exemplu de creare a unui site web pe HTML:
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ă 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ționați cu atributele din dreapta sus stânga jos 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 setăm modelul blocului de linii. Dezavantajele pe care le primim sunt barele de defilare care nu funcționează ș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 este setat 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 folosind 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=flexboxPă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; ) .bloc ( 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() . La 50% poziționarea absolută va poziționa colțul din stânga sus al blocului exact în centru, atunci sens negativ translate 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 metoda similara poate duce la probleme cu 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: - #latură
