În acest tutorial vom vedea cum să centrăm imaginile cu HTML și CSS. Nu este deloc complicat și vom avea nevoie de el adesea pentru paginile noastre web. Vom vedea câteva opțiuni, una pe care o folosim doar HTML, alta prin utilizarea CSS și în cele din urmă folosind Bootstrap.
HTML și CSS sunt două limbaje de scripting web de top în lumea creării de pagini web și aplicații. Ambele limbi lucrează împreună la această sarcină. În timp ce HTML oferă o structură paginilor web, CSS are grijă de stil și partea vizuală sau auditivă. HTML oferă etichete care înfășoară diferitele elemente ale unei pagini și în acest fel, împreună cu atribute, vom crea scheletul site-ului nostru web.
Diferențe între HTML și CSSPentru a rezuma, putem vedea diferențele dintre HTML și CSS după cum urmează:
- HTML este mai ușor de învățat și implementat
- HTML Disponibil în mai multe limbi
- HTML este ușor și eficient
- HTML are o securitate limitată
- HTML este oarecum lent.
- CSS are o bibliotecă mai mare de atribute și stiluri decât CSS
- CSS îmbunătățește timpul de încărcare a paginii.
- CSS are o compatibilitate excelentă și o întreținere ușoară.
- CSS oferă unele probleme de performanță
- CSS nu are securitate încorporată
Se recomandă astăzi să efectuați pașii direct cu CSS, dar dacă aveți mai mult HTML, puteți avea și următoarele opțiuni.
1. Cum se centrează imaginea pe pagina web folosind numai HTML
Deși făcând aceste opțiuni pentru a centra imaginea cu HTML, vom vedea două moduri de a o face cu ușurință.
Imagine centrală cu HTML și etichetă centralăÎn această opțiune simplă este suficient să înfășurați imaginea cu etichetele centrale
- Partea „src” este utilizată pentru a indica adresa căii imaginii.
- Partea alternativă oferă informații paginii web despre numele imaginii.
În plus, trebuie să atribuim o înălțime și o lățime a imaginii astfel:
înălțime = ”250” ”
Centrați imaginea cu HTML și mijlocDar, în ceea ce privește imaginile, acest concept de centru pe care l-am văzut diferă și este mai bine să folosiți o aliniere de mijloc, astfel încât codul rămâne după cum urmează:
Dacă adăugăm și text, am avea acest cod:
Acest exemplu va fi pentru a centra o imagine cu text în HTML.
Aliniați imaginea la HTML cu atributul alignDacă dorim să aliniați o imagine pe orizontală o putem face într-un mod similar cu ceea ce facem cu textul, adică utilizăm atributul de aliniere din etichete
sau. Vom crea codul în care apare atributul cu eticheta imagine. Eticheta este una dintre cele care acceptă atributul align, dar utilizarea este diferită.
Dar, după cum spunem, eticheta
Aici am pune textul care ar umple întreaga parte dreaptă și ar înfășura imaginea pe care am plasat-o. Continuăm să completăm textul solvetic solvetic solvetic
Vom face același lucru pentru a alinia textul și imaginea la dreapta la stânga, dar înlocuind „stânga” cu „dreapta”.
Nu este recomandat, deoarece aspectele de plasare și stil ar trebui lăsate la CSS și nu utilizate direct în HTML. În acest fel vom avea un cod mai ușor de întreținut și de modificat, dar dacă la un moment dat aveți nevoie de el pentru un test mic și rapid, merită să știți.
2. Cum se centrează o imagine pe o pagină web cu CSS
Aici vom avea cod HTML și cod CSS. Începem prin a ne uita la HTML.
Am pus o clasă a imaginii, numită centrată, și care ne va ajuta să o stilizăm ulterior în CSS. Mai jos este codul pentru a centra imaginea.
.center {margin: 10px auto; display: bloc; } De asemenea, putem folosi următorul cod pentru a alinia o imagine folosind CSS pentru pagina noastră web:
.center {margin-left: auto; marginea-dreapta: auto; }Dacă acest lucru nu funcționează pentru dvs. într-un browser deoarece se utilizează metoda de centrare a textului, trebuie să îi indicăm browserului că imaginea este un element la nivel de bloc. În acest fel îl putem centra ca și cum ar fi un alt bloc. Vom folosi acest cod:
Facem ca elementul să apară ca un bloc și îi dăm o marjă automată (este suficient ca marja să fie automată pe laturi, sus și jos, puteți pune orice doriți). Rețineți că, dacă imaginea ocupă întreaga lățime, aceasta nu va fi centrată.
img.center {display: block; margine-stânga: auto; marginea-dreapta: auto; }
3. Cum se centrează o imagine pe pagina web folosind Bootstrap
Cu acest cadru popular totul este mai simplu, trebuie doar să punem clasa bloc central în imagine.
Va trebui să descărcați Bootstrap și să-l conectați sau să vă puneți CDN-ul în HTML-ul nostru, pentru aceasta vă las linkul mai jos:
Putem vedea rezultatul aplicării acestor coduri cu o imagine de mai jos:
În acest fel, putem să ne centrăm atât imaginile în HTML, cât și folosind CSS și astfel să facem lucrări web de succes din punct de vedere estetic.
