Come centrare un IMG assoluto all'interno di un div

January 25

Nella progettazione Web, quando si utilizza il posizionamento assoluto per un oggetto, il browser pone rispetto al suo primo oggetto padre. In molti casi, questo finisce per allineare l'oggetto sul lato sinistro del blocco. Ciò significa che l'oggetto è visualizzato allineato con il lato sinistro del browser. È possibile utilizzare una proprietà text-align per centrare il testo o altri oggetti, ma questo non funziona con le immagini che utilizzano il posizionamento assoluto. Tuttavia, è possibile aggirare questa limitazione utilizzando la larghezza della varie proprietà di stile di immagine e di modificare la posizione dell'immagine.

istruzione

1 Aprire il file HTML. Inserire il cursore all'interno del tag <div> in cui si desidera inserire un'immagine assoluto.

2 Digitare quanto segue:

<Img alt = "Descrizione immagine" width = stile "100px" = "position: absolute; margin-left: -50px; a sinistra: 50%;" />

Cambiare la "src" e "larghezza" attribuisce a corrispondere a quelli appartenenti all'immagine. Modificare la proprietà di stile "margin-left" a parità di mezzo la larghezza dell'immagine, se necessario. La struttura "sinistra" stile imposta il bordo sinistro dell'immagine posizionamento assoluto alla metà della larghezza del suo elemento genitore, che centra efficacemente all'interno del blocco.

3 Salvare il file.