In questo tutorial vedremo come centrare le immagini con HTML e CSS. Non è affatto complicato e ne avremo bisogno spesso per le nostre pagine web. Vedremo alcune opzioni, una che usiamo solo HTML, un'altra attraverso l'uso di CSS e infine utilizzando Bootstrap.
HTML e CSS sono due linguaggi di scripting Web leader nel mondo della creazione di pagine Web e applicazioni. Entrambe le lingue lavorano insieme su questo compito. Mentre l'HTML dà una struttura alle pagine web, CSS si occupa dello stile e della parte visiva o uditiva. L'HTML fornisce tag che avvolgono i diversi elementi di una pagina e in questo modo, insieme agli attributi, creeremo lo scheletro del nostro sito web.
Differenze tra HTML e CSSPer riassumere, possiamo vedere le differenze tra HTML e CSS come segue:
- L'HTML è più facile da imparare e implementare
- HTML Disponibile in più lingue
- L'HTML è leggero ed efficace
- L'HTML ha una sicurezza limitata
- L'HTML è un po' lento.
- I CSS hanno una libreria di attributi e stili più ampia rispetto ai CSS
- CSS migliora il tempo di caricamento della pagina.
- CSS ha una grande compatibilità e una facile manutenzione.
- I CSS danno alcuni problemi di prestazioni
- CSS non ha sicurezza integrata
Oggi si consiglia di eseguire i passaggi direttamente con i CSS, ma se si utilizza maggiormente l'HTML si possono avere anche le seguenti opzioni.
1. Come centrare l'immagine sulla pagina web usando solo HTML
Sebbene crei queste opzioni per centrare l'immagine con HTML, vedremo due modi per farlo facilmente.
Centra immagine con HTML e tag centraleIn questa semplice opzione è sufficiente avvolgere l'immagine con le etichette centrali
- La parte "src" viene utilizzata per indicare l'indirizzo del percorso dell'immagine.
- La parte alt fornisce informazioni alla pagina web sul nome dell'immagine.
Inoltre, dobbiamo assegnare un'altezza e una larghezza dell'immagine in questo modo:
altezza = ”250” ”
Centra l'immagine con HTML e al centroMa rispetto alle immagini, questo concetto di centro che abbiamo visto differisce ed è meglio usare un allineamento intermedio, quindi il codice rimane il seguente:
Se aggiungiamo anche del testo avremmo questo codice:
Questo esempio servirà a centrare un'immagine con il testo in HTML.
Allinea l'immagine all'HTML con l'attributo di allineamentoSe vogliamo allineare un'immagine orizzontalmente possiamo farlo in modo simile a quello che facciamo con il testo, ovvero usare l'attributo align all'interno delle etichette
o. Creeremo il codice in cui appare l'attributo con il tag immagine. L'etichetta è una di quelle che accetta l'attributo align ma l'uso è diverso.
Ma come si dice, l'etichetta
Qui metteremmo il testo che riempirebbe l'intera parte destra e avvolgeremmo l'immagine che abbiamo posizionato. Continuiamo a compilare il testo solvetic solvetic solvetic
Faremo lo stesso per allineare il testo e l'immagine a destra a sinistra, ma sostituendo "sinistra" con "destra".
Non è raccomandato, perché gli aspetti di posizionamento e stile dovrebbero essere lasciati ai CSS e non utilizzati direttamente in HTML. In questo modo avremo un codice più facile da manutenere e modificare, ma se in un dato momento ne avrete bisogno per un piccolo e veloce test, vale la pena saperlo.
2. Come centrare un'immagine su una pagina web con i CSS
Qui avremo codice HTML e codice CSS. Iniziamo guardando l'HTML.
Abbiamo messo una classe all'immagine, chiamata centrata, e questo ci aiuterà a modellarla in seguito nel CSS. Di seguito il codice per centrare l'immagine.
.center {margine: 10px automatico; blocco di visualizzazione; } Possiamo anche usare il seguente codice per allineare un'immagine usando i CSS per la nostra pagina web:
.center {margine sinistro: auto; margine destro: auto; }Se questo non funziona per te in un browser perché viene utilizzato il metodo di centratura del testo, dobbiamo indicare al browser che l'immagine è un elemento a livello di blocco. In questo modo possiamo centrarlo come se fosse un altro blocco. Useremo questo codice:
Facciamo apparire l'elemento come un blocco, e gli diamo un margine automatico (basta che il margine sia automatico ai lati, in alto e in basso puoi mettere quello che vuoi). Tieni presente che se l'immagine occupa l'intera larghezza, non sarà centrata.
img.center {display: block; margine sinistro: auto; margine destro: auto; }
3. Come centrare un'immagine sulla pagina web usando Bootstrap
Con questo framework popolare tutto è più semplice, dobbiamo solo mettere la classe center-block nell'immagine.
Dovrai scaricare Bootstrap e collegarlo o inserire il tuo CDN nel nostro HTML, per questo lascio il tuo link qui sotto:
Possiamo vedere il risultato dell'applicazione di questi codici con un'immagine qui sotto:
In questo modo possiamo sia centrare le nostre immagini in HTML che utilizzando CSS e quindi realizzare lavori web esteticamente più efficaci.
