Astăzi, dragă cititor, ne vom ocupa de problema alinierii verticale într-un bloc. div.
Sunt șanse să știți deja despre minunata proprietate CSS vertical-align.Și Dumnezeu însuși ne-a spus să folosim această proprietate pentru alinierea verticală (nu degeaba are un nume atât de explicit).
Formularea problemei: Este necesar să centrați conținutul blocului de înălțime variabilă față de verticală.
Acum să trecem la rezolvarea problemei.
Și așa, avem un bloc, înălțimea lui se poate schimba:
Primul lucru care vă vine în minte este să faceți următorul truc:
Există toate motivele să credem că fraza Blocați conținutul se va alinia la centrul înălțimii containerului div.
Dar nu era acolo! Nu vom obține nicio aliniere centrală așteptată în acest fel. Și de ce? S-ar părea că totul este indicat corect. Se pare că aceasta este captura: proprietatea vertical-align poate fi folosit doar pentru a alinia conținutul celulelor tabelului sau pentru a alinia elemente în linie unul față de celălalt.
În ceea ce privește alinierea în celula tabelului, cred că totul este clar. Voi explica un alt caz cu elemente inline.
Alinierea verticală a elementelor inline
Să presupunem că aveți un șir de text care este împărțit cu etichete inline în părți:
Tu salută bucată text!
O etichetă inline este înțeleasă ca un container, al cărui aspect nu duce la împachetarea conținutului la o nouă linie.
Acțiunea etichetei bloc duce la împachetarea conținutului containerului pe o nouă linie.
Este o etichetă de bloc. Dacă închidem bucăți de text în blocuri, apoi fiecare dintre ele va apărea pe o nouă linie. Folosind eticheta care, spre deosebire de, este litere mici, nu va exista ambalare a containerelor la o linie nouă, toate containerele rămâne pe o singură linie.Container Este convenabil de utilizat atunci când specificați o parte a textului cu formatare specială (evidențierea cu culoare, un font diferit etc.)
Pentru containere aplicați următoarele proprietăți CSS:
#perviy (alinierea verticală: sub;) #vtoroy (alinierea verticală: 3px;) #tretiy (alinierea verticală: -3px;)
Ca rezultat, linia de text va arăta astfel:
Aceasta nu este altceva decât alinierea verticală a elementelor inline și proprietatea CSS vertical-align face față perfect acestei sarcini.
Ne abatem puțin, acum ne întoarcem la sarcina noastră principală.
Aliniere verticală într-un container div
Indiferent, vom folosi proprietatea pentru a ne alinia în interiorul containerului div. vertical-align... După cum am spus deja, această proprietate poate fi folosită în cazul alinierii elementelor inline (am discutat acest caz în detaliu mai sus și nu ne convine pentru alinierea într-un container div); rămâne doar să folosim faptul că vertical-align funcționează pentru celulele de tabel.
Cum putem folosi asta? Nu avem masă, lucrăm cu un container div.
Ha, se dovedește a fi foarte simplu.
proprietate CSS afişa ne permite să transformăm blocul nostru div într-o celulă de tabel, se poate face ușor și natural:
Să avem un div de clasă aliniere text:
Blocați conținutulPentru acest bloc, specificați următoarea proprietate CSS:
Textalign (afișare: table-cell;)
Această instrucțiune CSS va transforma în mod miraculos div-ul nostru într-o celulă de tabel, fără a o altera vizual în vreun fel. Și pentru o celulă de tabel, putem aplica proprietatea vertical-align alinierea verticală dorită va funcționa pe deplin.
Totuși, totul nu se poate termina atât de simplu. Avem un browser IE minunat. Nu știe să lucreze cu proprietatea afișare: tabel-celulă(Sugerez să vă familiarizați cu tabelul care ilustrează performanța acestei proprietăți CSS în diferite browsere de pe site-ul web htmlbook.ru). Prin urmare, va trebui să mergem la diverse trucuri.
Există multe modalități de a realiza alinierea într-un container div pentru toate browserele:
- Metodă folosind un cotneyer auxiliar suplimentar
- Metoda folosind expresia. Este asociat cu un calcul inteligent al înălțimii blocurilor. Cunoașterea JavaScript este indispensabilă aici.
- Folosind proprietatea line-height. Această metodă este potrivită numai pentru alinierea verticală într-un bloc de înălțime cunoscută, ceea ce înseamnă că, în general, nu este aplicabilă.
- Utilizarea decalajului de conținut absolut și relativ în cazul browserului IE. Aceasta metoda mi se pare cea mai clara si simpla. De asemenea, este implementabil pentru un container cu înălțime variabilă div. Ne vom opri asupra ei mai detaliat.
După cum înțelegeți, rămâne să rezolvăm problema alinierii verticale în IE, asociată cu înțelegerea greșită a proprietății. afișare: tabel-celulă(nici IE6, nici IE7, nici IE8 nu sunt familiarizați cu această proprietate). Prin urmare, folosind comentariu condiționat special pentru browserele din familia IE, vom specifica alte proprietăți CSS.
Comentariu condiționat
Design tip:
... Инструкции, действующие только в случае выполнения условия в квадратных скобках...
se numește comentariu condiționat (ai grijă, forma unui comentariu condiționat trebuie să se potrivească pe deplin cu exemplul dat, până la un spațiu).
Instrucțiunile conținute într-un astfel de comentariu condiționat vor fi executate doar dacă browserul care interpretează acest cod aparține familiei IE.
Astfel, folosind un comentariu condiționat, putem ascunde o bucată de cod din toate browserele, cu excepția IE.
Rezolvarea problemei
Din cauza acestui pătrunjel, va trebui să ne alimentem HTML cu două containere suplimentare. Iată cum va arăta blocul nostru de text:
Acesta este un fel de text de verificare.
Este format din două linii.Pentru clasa container div aliniere text setează proprietăți CSS care își aliniază conținutul vertical pentru toate browserele normale (cu excepția IE, desigur):
Display: tabel-celula; vertical-align: mijloc;
Și încă două proprietăți care stabilesc lățimea și înălțimea blocului:
Latime: 500px; înălțime: 500px;
Acest lucru este suficient pentru a alinia conținutul containerului în centru față de verticală, în toate browserele. cu excepția IE.
Acum începem să adăugăm proprietăți legate de aliniere. pentru browsere din familia IE(pentru ei am folosit blocuri suplimentare divși span):
Referitor la etichetă divîn interiorul unui bloc de clasă aliniere text... Pentru a face acest lucru, trebuie mai întâi să specificați numele clasei și apoi, separate printr-un spațiu, eticheta la care ne referim.
Textalign div (poziție: absolut; sus: 50%;)
O astfel de construcție înseamnă: pentru toate etichetele div din interiorul unui bloc cu clasa aliniere text aplicați proprietățile enumerate.
În consecință, stilurile specificate pentru bloc aliniere text sunt modificate:
Textalign (afișare: tabel-celulă; vertical-align: mijloc; lățime: 500px; înălțime: 500px; poziție: relativă;)
Punctul din stânga sus al casetei de text este acum compensat în jos cu 50%.
Pentru a clarifica ce se întâmplă, am desenat o ilustrație:
După cum puteți vedea din imagine, am făcut unele progrese. Dar asta nu este tot! Punctul din stânga sus al casetei galbene s-a mutat într-adevăr cu 50% în jos față de caseta părinte (violet). Dar avem nevoie de ceva la cincizeci la sută din înălțimea blocului violet centrul blocului galben, nu punctul său din stânga sus.
Acum eticheta va fi folosită spanși poziționarea sa relativă:
Textalign span (poziție: relativă; sus: -50%;)
Astfel, am deplasat blocul galben în sus cu 50% din înălțimea lui, raportat la poziția de pornire. După cum vă puteți imagina, înălțimea casetei galbene este egală cu înălțimea conținutului centrat. Iar ultima operațiune cu containerul span ne-a poziționat conținutul în mijlocul blocului violet. Ura!
Un mic șaman
În primul rând, trebuie să ascundem pătrunjelul din toate browserele normale și să-l deschidem pentru IE. Acest lucru se poate face, desigur, cu ajutorul unui comentariu condiționat, nu degeaba ne-am familiarizat cu el:
Există o mică problemă. Dacă conținutul centrat este prea mare, atunci aceasta duce la consecințe neplăcute: apare înălțimea de defilare verticală suplimentară.
Soluţie: trebuie să adăugați proprietate debordare: ascuns bloc aliniere text.
Cunoașteți proprietatea în detaliu revărsare poate fi în.
Aspectul final al instrucțiunilor de bloc CSS aliniere text se pare ca:
Textalign (afișare: table-cell; vertical-align: middle; lățime: 500px; înălțime: 500px; poziție: relativă; overflow: ascuns; chenar: 1px negru;)
Îmi pare rău, am uitat să menționez un punct important. Daca incerci setați înălțimea blocului de clasă aliniere text ca procent atunci ai nu va ieși nimic din asta.
Centrare în bloc de înălțime variabilă
De foarte multe ori este necesar să setați înălțimea unui bloc de clasă. aliniere text nu în pixeli, ci ca procent din înălțimea blocului părinte și aliniați conținutul containerului div în mijloc.
Problema este că este imposibil să faci acest lucru pentru o celulă de tabel (și până la urmă, blocul de clasă aliniere text se transformă într-o celulă de masă, datorită proprietății afișare: tabel-celulă).
În acest caz, trebuie să utilizați un bloc extern pentru care este specificată proprietatea CSS afisare: tabelși deja pentru a seta valoarea procentuală a înălțimii. Apoi blocul s-a imbricat în el, cu directiva CSS afișare: tabel-celulă, va moșteni cu plăcere înălțimea blocului părinte.
Pentru a implementa un bloc cu înălțime variabilă în exemplul nostru, vom modifica ușor CSS-ul:
Clasă aliniere text vom modifica valoarea proprietatii afişa Cu tabel-celula pe masași eliminați directiva de aliniere vertical-align: mijloc... Acum putem schimba în siguranță valoarea înălțimii de la 500 de pixeli la, de exemplu, 100%.
Astfel, proprietățile CSS pentru blocul de clasă aliniere text va arata asa:
Textalign (afișare: tabel; lățime: 500px; înălțime: 100%; poziție: relativă; overflow: ascuns; chenar: 1px negru solid;)
Rămâne să implementăm centrarea conținutului. Pentru a face acest lucru, un container div imbricat într-un bloc de clasă aliniere text(acesta este același bloc galben din imagine), trebuie să setați proprietatea CSS afișare: tabel-celulă apoi va moșteni 100% înălțime din blocul părinte aliniere text(bloc violet). Și nimic nu ne împiedică să aliniem conținutul containerului div imbricat în centru cu proprietatea vertical-align: mijloc.
Obținem o altă listă suplimentară de proprietăți CSS pentru div imbricat în container aliniere text.
Textalign div (afișare: table-cell; vertical-align: middle;)
Acesta este tot trucul. Opțional, puteți varia înălțimea cu conținut centrat.
Pentru mai multe informații despre alinierea verticală a unui bloc de înălțime variabilă, consultați.
Dacă tăiați orice site web pe baza html, atunci veți vedea o anumită structură strat cu strat. Mai mult, în aspectul său, va fi asemănător cu un foietaj. Dacă așa crezi, atunci cel mai probabil nu ai mâncat de mult. Așa că hrănește-ți mai întâi foamea, apoi îți vom arăta cum să centrați stratul div pe site-ul dvs.:
Beneficiile etichetării
Există două tipuri principale de construire a unei structuri de șantier:
- Tabular;
- Blocky.
Dispunerea tabelului a dominat încă de la începuturile internetului. Avantajele sale includ precizia poziționării specificate. Dar, cu toate acestea, are dezavantaje evidente. Principalele sunt volumul codului și viteza scăzută de descărcare.
Când utilizați un aspect tabelar, pagina web nu va fi afișată până când nu este încărcată complet. În timp ce atunci când utilizați blocuri div, elementele sunt afișate imediat.
Pe lângă viteza mare de încărcare, construcția bazată pe blocuri a site-ului permite de mai multe ori reducerea cantității de cod html. Inclusiv prin utilizarea claselor CSS.
Cu toate acestea, aspectul tabelar ar trebui utilizat pentru a structura afișarea datelor pe o pagină. Un exemplu clasic de utilizare a acestuia este afișarea tabelelor.
Construire bloc pe baza etichetelor
numite și strat cu strat, iar blocurile în sine sunt straturi. Acest lucru se datorează faptului că atunci când utilizați anumite valori de proprietate, acestea pot fi stivuite una peste alta, ca straturi în Photoshop.Ajutoare pentru pozitionare
În aspectul bloc, poziționarea stratului se face cel mai bine folosind foi de stil în cascadă. Principala proprietate CSS responsabilă de poziționare
, este un plutitor.
Sintaxa proprietății:
float: stânga | dreapta | niciunul | moşteni,
Unde:
- stânga - aliniază elementul la stânga ecranului. Curgerea în jurul restului elementelor are loc în dreapta;
- dreapta - alinierea la dreapta, curgerea în jurul altor elemente - la stânga;
- none - nu este permisă împachetare;
- 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:
Blocul din stânga
Blocul din dreapta
Acum să încercăm să folosim aceeași proprietate pentru a poziționa al treilea div în centrul paginii. Dar, din păcate, float nu are valoare centrală. Și când setați un nou bloc la valoarea de aliniere la dreapta sau la stânga, acesta este deplasat în direcția specificată. Prin urmare, rămâne doar 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ă, toate straturile sunt aranjate pe un rând vertical, iar când dimensiunea este mărită, se lipesc de marginea stângă a ferestrei. Prin urmare, este nevoie de o modalitate mai bună de a alinia centrarea div-ului.
Straturi de centrare
În exemplul următor, vom folosi un strat container în care vom plasa restul elementelor. Acest lucru rezolvă problema deplasării blocurilor unul față de celălalt atunci când fereastra este redimensionată. Centrarea containerului în mijloc se face prin setarea proprietăților marginii la zero pentru marginea superioară și automat pe părțile laterale (marja: 0 auto):
Blocul din stânga
Bloc central
Blocul din dreapta
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 containerului (reduceți-l). Adică, după editarea css-ului, clasa 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 la nicio dimensiune a ferestrei browserului. Iată cum arată centrarea verticală a div-ului:
În următorul exemplu, am folosit o serie de noi proprietăți CSS pentru a centra straturile în interiorul containerului:
O scurtă descriere a proprietăților css și a valorilor lor pe care le-am folosit în acest exemplu pentru a centra div-ul în interiorul div:
- display: inline-block - Aliniază un element de bloc la o linie și se asigură că este înfășurat în jurul altui element.
- vertical-align: middle - aliniază elementul la mijloc față de părintele;
- margin-left - setează marginea la stânga.
Cum se face o legătură dintr-un strat
Destul de ciudat sună, dar 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ă:
Link către site-ul nostru
În acest exemplu, folosind linia de afișare: bloc, setăm legătura cu valoarea elementului bloc. Și pentru a face din întreaga înălțime a blocului div o legătură, setați înălțimea: 100%.
Ascunderea și afișarea elementelor de bloc
Elementele bloc oferă mai multe opțiuni pentru extinderea funcționalității interfeței decât aspectul de tabel învechit. Se întâmplă adesea ca designul unui site 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 de pornire, care are cel mai mare cost de plasare a anunțurilor. Prin urmare, există o problemă în care să „împinge” un alt banner publicitar. Alinierea div-ului la centrul paginii nu este suficientă!
O soluție mai rațională este să ascundă un bloc. Iată un exemplu simplu de astfel de implementare:
Acesta este un buton magic. Făcând clic pe acesta, se va ascunde sau se va afișa blocul de ascundere.
În acest exemplu, poziția blocurilor div nu se modifică în niciun fel. Aceasta este o funcție JavaScript simplă care modifică valoarea proprietății de afișare css după ce faceți clic pe butonul ( 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-grupDupă 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, folosind una dintre valorile sale ( inline-block) am implementat div-uri de aliniere centrală în interiorul div-urilor.
Am folosit două valori pentru proprietatea de afișare pentru a ascunde și afișa stratul.
Foarte des în aspect este necesară centrarea unui element orizontal și/sau vertical. Prin urmare, am decis să fac un articol cu diverse metode de centrare, astfel încât totul să fie la îndemână într-un singur loc.
Aliniere orizontala
margine: auto
Alinierea orizontală cu margine este utilizată atunci când lățimea elementului centrat este cunoscută. Lucrări pentru elemente de bloc:
Element (margine-stânga: automat; margine-dreapta: automat; lățime: 50%;)
Specificarea valorii automate pentru umplutura din dreapta și din stânga le face egale, ceea ce centrează elementul orizontal în blocul părinte.
text-align: centru
Această metodă este potrivită pentru alinierea la centru a textului într-un bloc. text-align: center:
Alinierea cu text-align Sunt aliniat la centru
poziție și marja negativă la stânga
Potrivit pentru blocuri centrate de lățime cunoscută. Oferim poziția blocului părinte: relativ la poziția relativă la acesta, elementul centrat este poziția: absolut, stânga: 50% și o marjă negativă-stânga, care este egală cu jumătate din lățimea elementului:
Alinierea cu poziția Sunt aliniat la centru
display: inline-block + text-align: center
Această metodă este potrivită pentru alinierea blocurilor de lățime necunoscută, dar necesită un înveliș părinte. De exemplu, în acest fel puteți centra un meniu orizontal:
Aliniere cu afișaj: inline-block + text-align: center; Aliniere verticală
inaltimea liniei
Pentru a alinia o linie de text, puteți utiliza aceeași înălțime și aceeași distanță între rânduri pentru blocul părinte. Potrivit pentru butoane, elemente de meniu și multe altele.
inaltimea liniei Sunt aliniat vertical
poziție și marja negativă în sus
Un element poate fi aliniat vertical dându-i o înălțime fixă și aplicând o poziție: absolută și o marjă negativă în sus egală cu jumătate din înălțimea elementului aliniat. Blocului părinte trebuie să i se atribuie poziția: relativă:
Wrapper (poziție: relativ;) element (înălțime: 200px; marjă: -100px 0 0; poziție: absolut; sus: 50%;)
Astfel, folosind poziţionarea şi marginile negative, puteţi centra elementul pe pagină.
afișare: tabel-celulă
Pentru alinierea verticală, proprietatea display: table-cell este aplicată elementului, ceea ce îl face să emuleze o celulă de tabel. De asemenea, setăm înălțimea și alinierea verticală: la mijloc. Toate acestea le vom împacheta într-un container cu proprietatea dislpay: table; :
Afișare aliniere verticală: tabel-celulă Sunt aliniat vertical
Alinierea dinamică a unui element pe pagină
Am căutat modalități de a alinia elementele dintr-o pagină folosind CSS. Acum să aruncăm o privire asupra implementării variantei jQuery.
Să includem jQuery pe pagină:
Vă sugerez să scrieți o funcție simplă pentru a centra un element pe pagină, să-l numim alignCenter (). Elementul în sine acționează ca un argument al funcției:
Funcția alignCenter (elem) (// codează aici)
În corpul funcției, să calculăm dinamic și să agățăm coordonatele centrului paginii la proprietățile CSS din stânga și de sus:
Funcția alignCenter (elem) (elem.css ((stânga: ($ (fereastră) .width () - elem.width ()) / 2 + "px", sus: ($ (fereastră) .height () - elem. înălțime ()) / 2 + "px" // amintiți-vă să adăugați poziția: absolută la element pentru a declanșa coordonatele)))
În prima linie a funcției, obținem lățimea documentului și scădem din el lățimea elementului, împărțit la jumătate - acesta va fi centrul paginii pe orizontală. A doua linie face același lucru, doar cu înălțimea, pentru alinierea verticală.
Funcția este gata, rămâne să o agăți pe DOM-ul gata și evenimentele de redimensionare a ferestrei:
$ (funcția () (// apelează funcția de centrare când DOM-ul este gata alignCenter ($ (elem)); // apelează funcția când fereastra este redimensionată $ (window) .resize (funcția () (alignCenter ($ () elem));)) // funcția de centrare a elementului funcția alignCenter (elem) (elem.css ((// se calculează coordonatele din stânga și de sus la stânga: ($ (fereastră) .width () - elem.width ()) / 2 + „px”, sus: ($ (fereastră) .height () - elem.height ()) / 2 + „px”)))))
Folosind Flexbox
Noile funcții ale CSS3, cum ar fi Flexbox, devin treptat obișnuite. Tehnologia ajută la crearea aspectului fără a utiliza flotoare, poziționare etc. Poate fi folosit și pentru centrarea elementelor. De exemplu, să folosim flexbox pe .wrapper-ul părinte și să centrem conținutul în interior:
Wrapper (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; înălțime: 500px; lățime: 500px;) .wrapper .conținut (marja: automat; / * marjă: 0 automat; numai pe orizontală * / / * marjă: automat 0; numai pe verticală * /)
Lorem ipsum dolor sit ametAceastă regulă centrează elementul orizontal și vertical în același timp - marginea funcționează acum nu numai pentru alinierea orizontală, ci și pentru alinierea verticală. Și fără o lățime / înălțime cunoscută.
Resurse aferente
Ajută proiectul
Alinierea orizontală și verticală a elementelor se poate face în diferite moduri. Alegerea metodei depinde de tipul de element (bloc sau inline), de tipul de poziționare, dimensiuni etc.
1. Alinierea orizontală la centrul blocului / paginii
1.1. Dacă blocul are o lățime:
div (lățime: 300px; margine: 0 automat; / * centrați elementul orizontal în blocul părinte * /)Dacă doriți să aliniați un element inline în acest fel, acesta trebuie să fie setat să afișeze: bloc;
1.2. Dacă blocul este imbricat într-un alt bloc și nu este setată/setată lățimea pentru el:
.wrapper (text-align: center;)1.3. Dacă blocul are o lățime și trebuie fixat în centrul blocului părinte:
.wrapper (poziție: relativ; / * setați poziționarea relativă pentru caseta părinte, astfel încât ulterior să putem poziționa absolut caseta în interiorul acesteia * /) .box (lățime: 400px; poziție: absolut; stânga: 50%; margin- stânga: -200px; / * deplasați blocul la stânga cu o distanță egală cu jumătate din lățimea sa * /)1.4. Dacă nu este specificată lățimea pentru blocuri, puteți centra folosind blocul de înveliș părinte:
.wrapper (text-align: center; / * poziționați conținutul blocului în centru * /) .box (display: inline-block; / * aranjați blocurile într-un rând orizontal * / margin-right: -0.25em ; / * eliminați indentația dreaptă dintre blocuri * /)2. Alinierea verticală
2.1. Dacă textul se întinde pe un rând, de exemplu, pentru butoane și elemente de meniu:
.button (înălțime: 50px; înălțime linie: 50px;)2.2. Pentru a alinia un bloc vertical într-un bloc părinte:
.wrapper (poziție: relativ;) .box (înălțime: 100px; poziție: absolut; sus: 50%; margine: -50px 0 0 0;)2.3. Alinierea verticală după tipul tabelului:
.wrapper (afișare: tabel; lățime: 100%;) .box (afișare: tabel-celulă; înălțime: 100px; text-align: center; vertical-align: middle;)2.4. Dacă un bloc are o lățime și o înălțime și trebuie să fie centrat pe blocul părinte:
.wrapper (poziție: relativ;) .box (înălțime: 100px; lățime: 100px; poziție: absolut; sus: 0; dreapta: 0; jos: 0; stânga: 0; margine: automat; overflow: automat; / * la conținutul nu s-a strecurat * /)2.5. Poziționarea absolută în centrul paginii/blocului folosind transformarea CSS3:
dacă elementul este dimensionat
div (lățime: 300px; / * setați lățimea blocului * / înălțimea: 100px; / * setați înălțimea blocului * / transform: translate (-50%, -50%); poziție: absolut; sus: 50%; stânga: 50% ;)
dacă elementul nu este dimensionat și nu este gol
h1 (marja: 0; transformare: traducere (-50%, -50%); poziție: absolută; sus: 50%; stânga: 50%;)Un text aici
Există mai multe moduri fundamental diferite de a centra un obiect pe verticală folosind CSS, dar poate fi dificil să îl alegeți pe cel potrivit. Ne vom uita la unele dintre ele și, de asemenea, vom face un mic site folosind cunoștințele acumulate.
Alinierea verticală la centru cu CSS nu este ușor de realizat. Există multe moduri și nu toate funcționează în toate browserele. Să aruncăm o privire la 5 metode diferite și la avantajele și dezavantajele fiecăreia. Exemplu.
1-a cale
Această metodă presupune că setăm un element
modul de afișare este ca un tabel, după care putem folosi proprietatea vertical-align în el (care funcționează diferit în diferite elemente).
#wrapper (afișare: tabel;) #celulă (afișare: tabel-celulă; vertical-align: mijloc;)Câteva informații utile care ar trebui să fie centrate.pro
- Conținutul se poate schimba dinamic înălțimea (înălțimea nu este definită în CSS).
- Conținutul nu este decupat dacă nu există suficient spațiu pentru el.
Minusuri
- Nu funcționează în IE 7 sau mai puțin
- Multe etichete imbricate
a 2-a metoda
Această metodă utilizează poziționarea absolută a div-ului, care își setează vârful la 50% și marginea de sus 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 preaplin: auto; pentru div-ul care conține conținutul, deci dacă conținutul nu se potrivește, vor apărea bare de defilare.
Conținut aici#conținut (poziție: absolut; sus: 50%; înălțime: 240px; margin-top: -120px; / * minus jumătate din înălțime * /)pro
- Funcționează în toate browserele.
- Fără cuibări inutile.
Minusuri
- Când nu este suficient spațiu, conținutul dispare (de exemplu, div-ul este în interiorul corpului, iar utilizatorul a micșorat ferestrele, 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%;), iar marginea de jos la jumătate din înălțime (margin-bottom: -contentheight;). Conținutul va șterge plutitorul și va fi centrat.
#floater (float: stânga; înălțime: 50%; margin-bottom: -120px;) #conținut (clear: ambele; înălțime: 240px; poziție: relativ;)aici este conținutulpro
- Funcționează în toate browserele.
- Când nu există suficient spațiu (de exemplu, când fereastra este redusă), conținutul nu este tăiat, vor apărea bare de defilare.
Minusuri
- Cred că un singur lucru: că se folosește un element gol suplimentar.
a 4-a metoda.
Această metodă utilizează proprietatea poziției: absolute; pentru div-uri cu dimensiuni fixe (lățime și înălțime). Apoi setăm coordonatele în partea de sus: 0; jos: 0; dar din moment ce are o înălțime fixă, nu se poate întinde și este centrat. Aceasta este foarte asemănătoare cu metoda binecunoscută de centrare orizontală a unui element bloc cu lățime fixă (marja: 0 auto;).
Informații importante.#conținut (poziție: absolut; sus: 0; jos: 0; stânga: 0; dreapta: 0; margine: automat; înălțime: 240px; lățime: 70%;)pro
- Foarte simplu.
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.
a 5-a metoda
Puteți folosi această metodă pentru a alinia în centru o linie de text. Am stabilit doar înălțimea textului (linie-înălțime) egală cu înălțimea (înălțimea) elementului. După aceea, linia va fi afișată în centru.
O oarecare linie de text#conținut (înălțime: 100px; înălțime linie: 100px;)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ă tehnică este foarte utilă pentru articole mici, cum ar fi centrarea textului într-un buton sau casetă de text.
Acum că știți cum să obțineți alinierea verticală la centru, să creăm un site web simplu, care să arate astfel:
Pasul 1
Este întotdeauna bine să începeți cu marcaj semantic. Pagina noastră va fi structurată după cum urmează:
- #floater (pentru a alinia conținutul central)
- #centrat (element central)
- #latură
- #siglă
- #nav (lista
- #conţinut
- #bottom (pentru drepturi de autor și altele)
Să scriem următorul marcaj html:
O companie centrată O companieTitlul paginii
Reproiectează în mod 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. Predomină holistic inovația premium după scenarii convingătoare. Recaptiualizați fără probleme standardele î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. Împuterniciți în mod convenabil meta-servicii multidisciplinare fără interfețe la nivel de întreprindere. Simplificați convenabil domeniile tematice strategice competitive cu piețe electronice concentrate. Sindicați fosfluorescent comunități de clasă mondială față de piețele cu valoare adăugată. Reinventează în mod corespunzător serviciile holistice înaintea serviciilor electronice robuste.
Notificarea privind drepturile de autor ajunge aici
Pasul 2
Vom scrie acum cel mai simplu CSS pentru a poziționa elementele pe pagină. Trebuie să salvați acest cod în fișierul style.css. Pentru el este înregistrat linkul în fișierul html.
Html, corp (marja: 0; umplutură: 0; înălțime: 100%;) corp (fond: 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ție: relativ; clar: stânga; înălțime: 400px; lățime: 80%; max -lățime: 800px; lățime minimă: 400px; marjă: 0 automat; fundal: #fff; chenar: 4px solid # 666;) #jos (poziție: absolut; jos: 0; dreapta: 0;) #nav (poziție: absolut; stânga: 0; sus: 0; jos: 0; dreapta: 70%; umplutură: 20px; marjă: 10px;) #conținut (poziție: absolut; stânga: 30%; dreapta: 0; sus: 0; jos: 0; overflow: automat; înălțime: 340px; umplutură: 20px; margine: 10px;)
Înainte de a ne putea centra conținutul, trebuie să setăm corpul și înălțimea html la 100%. Deoarece înălțimea este calculată fără margini interne și externe (padding și margin), le setăm (margini) la 0, astfel încât să nu existe bare de defilare.
Umplutura inferioară pentru elementul „floater” -a 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:
Lățimea elementului #centrat este de 80%. Acest lucru face ca site-ul nostru să fie deja pe ecrane mici și mai larg pe cele mari. majoritatea site-urilor arată obscene pe noile monitoare largi din colțul din stânga sus. Proprietățile min-width și max-width constrâng, de asemenea, pagina noastră, astfel încât să nu pară prea lată sau prea îngustă. Internet Explorer nu acceptă aceste proprietăți. Trebuie să setați o lățime fixă pentru el.
Deoarece elementul #centrat este setat la poziție: relativă, putem folosi poziționarea absolută a elementelor din el. Apoi setați preaplin: automat; pentru elementul #content, astfel încât să apară bare de defilare în cazul în care conținutul nu se va potrivi.
Pasul 3
Și ultimul lucru pe care îl vom face este să adăugăm câteva stiluri 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 (afișare: bloc; culoare de fundal: # e8e8e8; umplutură: 7px; margine: 0; text-decor: niciunul; culoare: # 000; chenar-jos: 1px solid #bbb; text-align: right;) #nav li a :: after ( conținut: "" "; culoare: #aaa; font-weight: bold; afișare: inline; float: dreapta; margine: 0 2px 0 5px;) #nav li a: hover, #nav li a: focus (fundal: # f8f8f8; border-bottom-color: # 777;) #nav li a: hover :: after (marja: 0 0 0 7px; culoare: # f93;) #nav li a: activ (padding: 8px 7px 6px 7px;)
Primul lucru pe care l-am făcut pentru a face meniul să arate mai bine a fost să eliminăm marcatorii setând atributul list-style la niciunul și, de asemenea, să setăm umplutură și umplutură, deoarece sunt foarte diferite în mod implicit în diferite browsere.
Rețineți că apoi am instruit linkurile să fie afișate ca elemente de bloc. Acum, când sunt afișate, ele se întind pe toată lățimea elementului în care se află.
Un alt lucru interesant pe care l-am folosit pentru meniu este: înainte și: după pseudo-clase. Vă permit să adăugați orice î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
Nu în ultimul rând, vom adăuga câteva răsturnări de situație designului nostru pentru și mai multă frumusețe.
#centrat (-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;) h1, h2, h3, h4, h5, h6 (familie de fonturi: Helvetica, Arial, sans- serif; greutate font: normal; culoare: # 666;) h1 (culoare: # f93; margine de jos: 1px solid #ddd; spațiere între litere: -0,05em; greutate font: bold; margine de sus: 0; padding-top: 0;) #bottom (padding: 10px; font-size: 0.7em; culoare: # f03;) #logo (dimensiune font: 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, proprietatea border-radius va fi responsabilă pentru acest lucru. Acest lucru nu este încă implementat de unele browsere, cu excepția cazului în care utilizați prefixele -moz și -webkit pentru Mozilla Firefox și Safari / Webkit.
Compatibilitate
După cum probabil ați ghicit, principala sursă de probleme de compatibilitate este Internet Explorer:
- Elementul #floater trebuie setat la lățimea sa.
- IE 6 are umplutură suplimentară în jurul meniurilor
235.882 de vizualizări
Top articole similare
