Come allineare l'immagine a destra in CSS

Le immagini sono considerate una forma visiva per trasmettere i tuoi messaggi o idee nelle applicazioni Web. Tuttavia, sono utili solo se si trovano nella posizione giusta. A volte, le immagini non sono nella loro posizione ed è richiesto il loro allineamento. Diverse proprietà di CSS possono aiutarti ad allineare le immagini.

Questo articolo dimostrerà due metodi per allineare un'immagine a destra in CSS.

Come allineare l'immagine a destra in CSS?

In CSS, useremo le seguenti proprietà per allineare un'immagine a destra:

• Proprietà galleggiante
• Visualizza proprietà

Quindi, iniziamo con il primo metodo.

Metodo 1: utilizzare la proprietà float per allineare l'immagine a destra in CSS

Il CSS "galleggiante"La proprietà viene utilizzata per controllare la posizione di un elemento. Decide se l'elemento galleggerà a destra, a sinistra o no in alcun modo.

Per la dimostrazione, forniremo un esempio per comprendere il funzionamento della proprietà menzionata.

Esempio

Ecco un'immagine di esempio allineata a sinistra per impostazione predefinita. Modificheremo la posizione dell'immagine e lo allineeremo sul lato destro:

Per fare ciò, specificare l'immagine SRC in Tag del file HTML:

Per allineare l'immagine selezionata a destra, imposteremo il valore di "galleggiante"Proprietà come"Giusto":

Dopo aver salvato il codice dato, apri il file HTML nel browser per visualizzare il risultato:

L'output di cui sopra indicava che abbiamo allineato correttamente l'immagine a destra usando la proprietà Float CSS.

Metodo 2: utilizzare la proprietà Visualizza per allineare l'immagine a destra in CSS

In CSS, il “Schermo"La proprietà determina il comportamento di un elemento. Definisce come un elemento agirà nel suo posto specificato. Puoi anche utilizzare la proprietà del display per impostare l'allineamento di un'immagine come a destra.

Guarda l'esempio di seguito per vedere come possiamo allineare un'immagine a destra utilizzando la proprietà del display CSS.

Esempio

Per allineare l'immagine proprio in CSS, specificheremo il "Schermo"Valore della proprietà come"-WebKit-Box". Il valore -webkit -box viene utilizzato per impostare il contenuto di qualsiasi elemento in una direzione particolare. Inoltre, il "margine-sinistra"La proprietà dell'immagine selezionata è anche impostata come"auto"Per dare al lato sinistro una parte dello spazio rimanente:

Produzione

Abbiamo fornito le istruzioni essenziali relative all'allineamento delle immagini a destra usando le proprietà CSS.

Conclusione

Per allineare un'immagine a destra in CSS, puoi usare il "galleggiante" E "Schermo" proprietà. Per lo scopo menzionato, il valore della proprietà float è impostato come giusto e il valore -webkit -box della proprietà display imposterà l'allineamento dell'immagine come a destra. In questo articolo sono stati descritti i due metodi più semplici per allineare le immagini a destra in CSS. Entrambi i metodi sono efficienti; Utilizza uno di essi secondo le tue preferenze.