În alinierea generală a elementelor HTML pe o pagină - nu este complicat. În unele cazuri. Dezvoltatorii web trebuie să rack de creierele lor pentru a găsi cea mai bună soluție.
elemente pe orizontală nu este atât de complicată Centering, verticală a ridicat întrebări, bine, combinând general, poate pune un impas. În epoca de proiectare, noi dimensiuni receptiv rareori exact clare ale anumitor elemente. Am numărat 6 moduri diferite de elemente cu CSS de centrare. Să începem cu un exemplu simplu, finisare mai sofisticate. Va lucra cu același cod HTML:
Alinierea orizontală folosind text-align
Uneori, cea mai simplă soluție este cel mai bun:
Nu există nici o aliniere verticala: pentru acest lucru, va trebui să adăugați un div în marjă-top și proprietate marginea de jos.
Centrarea folosind margin: auto
O altă soluție pentru alinierea orizontală:
Rețineți că, pentru această metodă, trebuie să setați afișajul de proprietate: bloc.
Centrarea folosind tabelul de celule
Folosind display: table-celulă, putem oferi un element de centrare atât pe verticală cât și pe orizontală. Dar atunci trebuie să investim mai mult în imaginea de un singur element de div.
Că totul funcționează corect, div-au nevoie pentru a seta lățimea: 100%. Pentru elementul de aliniere verticală folosi tehnici standard, înălțimea expusă. Acesta funcționează peste tot, inclusiv IE8 +.
alinierea absolută
soluție foarte interesantă. Este că trebuie să setați înălțimea recipientului exterior:
Centrați-le folosind traduce
Noua soluție, care utilizează transformări CSS. Acesta oferă atât o aliniere orizontală și verticală:
Există câteva dezavantaje:
- CSS transforma proprietatea necesită prefixe utilizarea browser-ului
- Nu funcționează în versiunile mai vechi ale IE (8 sau mai puțin)
- Recipientul exterior este necesar să se definească înălțimea.
- În cazul în care interiorul containerului există un text, acesta poate fi un pic neclară.
Aliniere folosind formularul de afișare flex
Probabil cea mai ușoară opțiune.
Ea nu funcționează în toate versiunile de IE (deși este posibil să se asigure, folosind în plus față de afișare: tabel cu celule). CSS complet:
Centering folosind calc
În unele cazuri, această metodă este mai versatil decât folosind flexbox:
Este foarte simplu, putem calcula dimensiunea necesară, în funcție de structura întregii pagini. Calculele sunt foarte simple, de 50%, este punctul central al containerului, dar sarcina noastră departe de aceste colțul din stânga sus coordonatele imaginii. În continuare, să ia jumătate din înălțimea și lățimea imaginii. Formula este:
În practică, s-ar putea găsi că această metodă funcționează bine, dacă știm dimensiunile elementelor:
Această metodă este susținută de Firefox-om, începând cu versiunea 4, va trebui să se înregistreze prefixele browser. În IE 8 nu funcționează. Codul complet:
Să sperăm că aceste metode vor fi de ajuns pentru a obține ai găsit o soluție mai bună.
5 lecții coloana ultima „CSS“
un efect redus cu personaje de animație interactive.
Conceptul mic de sfaturi distracție, care sunt puse în aplicare pe SVG și anime.js. În plus față de stilul special în exemplul realizat animația și transformarea obiectelor grafice.
Experiment: animat litere SVG bazate pe anime.js bibliotecă.
afișare cool pagina web a experimentului pe care „first-person“ prin ochelari de soare.
Script-pilot drop-down de navigare.
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!