Le immagini sono una parte importante di qualsiasi applicazione web. In genere non è consigliabile includere molte immagini in un'applicazione Web, ma è importante utilizzare le immagini ovunque siano richieste. I CSS ci aiutano a controllare la visualizzazione delle immagini nelle applicazioni web.
Allineare un'immagine significa posizionare l'immagine al centro, a sinistra e a destra. Possiamo usare il galleggiante proprietà e allineamento del testo proprietà per l'allineamento delle immagini.
ricerca bfs
Se l'immagine è nell'elemento div, allora possiamo usare il file allineamento del testo proprietà per allineare l'immagine nel div.
Esempio
In questo esempio, stiamo allineando le immagini utilizzando il file allineamento del testo proprietà. Le immagini sono nell'elemento div.
div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> Provalo adesso Produzione
Utilizzo della proprietà float
La proprietà float CSS è una proprietà di posizionamento. Viene utilizzato per spingere un elemento a sinistra o a destra, consentendo ad altri elementi di avvolgerlo attorno. Viene generalmente utilizzato con immagini e layout.
coda prioritaria
Gli elementi vengono mobilizzati solo orizzontalmente. Quindi è possibile spostare gli elementi solo a sinistra o a destra, non in alto o in basso. Un elemento flottato può essere spostato quanto più a sinistra o a destra possibile. Significa semplicemente che un elemento flottato può essere visualizzato all'estrema sinistra o all'estrema destra.
Esempio
img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> Provalo adesso Produzione
