I CSS ci aiutano a controllare la visualizzazione delle immagini nelle applicazioni web. La centratura di immagini o testi è un compito comune nei CSS. Per centrare un'immagine, dobbiamo impostare il valore di margine sinistro E margine destro A auto e renderlo un elemento di blocco utilizzando il file blocco di visualizzazione; proprietà.
semi contro spore
Se l'immagine è nell'elemento div, allora possiamo usare il file allineamento del testo: centro; proprietà per allineare l'immagine al centro nel div.
IL si dice che l'elemento sia un elemento in linea che può essere facilmente centrato applicando il comando allineamento del testo: centro; proprietà del CSS all'elemento genitore che lo contiene.
Nota: l'immagine non può essere centrata se la larghezza è impostata al 100% (larghezza intera).
Possiamo usare la proprietà abbreviata margine e impostarlo su auto per allineare l'immagine al centro, anziché utilizzare il file margine sinistro E margine destro proprietà.
Vediamo come centrare un'immagine applicando allineamento del testo: centro; proprietà al suo elemento genitore.
Esempio
In questo esempio, stiamo allineando le immagini utilizzando il file allineamento del testo: centro; proprietà. L'immagine è nell'elemento div.
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> Provalo adesso Produzione
Esempio
Ora stiamo usando il margine sinistro: automatico; margine destro: automatico; E blocco di visualizzazione; proprietà per allineare l'immagine al centro.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } Provalo adesso Produzione
