Come centrare un elemento assolutamente posizionato in un div?

Il posizionamento degli elementi in HTML e CSS è cruciale per strutturare gli elementi di una pagina web. Inoltre, il CSS "posizione"La proprietà può essere utilizzata per modificare le posizioni dell'elemento. Questa proprietà può essere utilizzata insieme agli attributi offset, tra cui proprietà destra, in alto, a sinistra e in basso, per modificare la posizione dell'elemento sulla pagina.

Questo post esaminerà la procedura per centrare un elemento che è assolutamente posizionato in un div.

Come centrare un elemento assolutamente posizionato in un div?

Per centrare un elemento assolutamente posizionato in un div, discuteremo i seguenti due metodi:

• Metodo 1: come centrare l'immagine relativa a "div"?

• Metodo 2: come centrare l'immagine rispetto a "corpo"?

Metodo 1: come centrare l'immagine relativa a "div"?

Per centrare l'immagine che è relativa al div, l'impostazione di una posizione relativa sul contenitore fornisce all'elemento assoluto un confine. Più specificamente, elementi che sono "assoluto"Sono limitati dal parente relativo più vicino posizionato. Ma se nulla di tutto ciò esiste, saranno delimitati dal Viewport.

Passaggio 1: aggiungi l'immagine nel file HTML

Segui le istruzioni fornite per centrare un'immagine relativa al contenitore creato:

• Prima di tutto, aggiungi un'intestazione utilizzando il tag di intestazione "

  ". Quindi, usa il "stile"Attributo tra il

  tagga e aggiungi il testo per l'intestazione.

• Successivamente, fai un ""E allocare il nome della classe come"elemento di posizione".
• Aggiungi un'immagine usando il “"Tag e inserire il"src"Attributo dell'immagine che si riferisce all'URL dell'immagine:

Elemento di posizione assoluto

Si può osservare che un'immagine è stata aggiunta con successo nel contenitore Div:

Ora, ci muoviamo verso la parte CSS per centrare l'elemento assolutamente posizionato in un div.

Passaggio 2: stile ".position-element "

.position-element
Altezza: 350px;
larghezza: 350px;
Margine: auto;
Posizione: relativo;
Bordo: 4px Solid RGB (38, 17, 114);

Nel codice sopra menzionato, accedi al "elementi posizionati"Classe utilizzando il"."Selettore e applicare le proprietà fornite:

• "altezza"La proprietà imposta l'altezza dell'elemento di accesso come" 350px ".
• "larghezzaLa proprietà "viene utilizzata per allocare la larghezza" 350px ".
• "margine"La proprietà specifica lo spazio attorno all'elemento e all'esterno del bordo definito.
• "posizione"La proprietà specifica il tipo di metodo posizionato e utilizzato per un elemento. Nell'esempio sopra, la posizione è impostata come "parente"Per posizionare l'elemento rispetto alla sua posizione normale.
• Poi, "confine"È usato per definire la larghezza, lo stile di linea e il colore del bordo attorno all'elemento.

Passaggio 3: stile ".IMG elementi di posizione "

Dai un'occhiata al blocco del codice dato:

.Position-element IMG
Posizione: assoluto;
Trasformazione: traduzione (-50%, -50%);
A sinistra: 50%;
Top: 50%;

Qui:

• "posizione"Impostato come" assoluto "che viene utilizzato per posizionare l'elemento rispetto alla sezione del corpo dell'HTML.
• "trasformare"La proprietà viene utilizzata per modificare lo spazio delle coordinate del modello di formattazione visiva con il"tradurre"Effetto.

• "Sinistra"Specifica l'impostazione orizzontale dell'elemento.
• "superiore"Assegna la regolazione verticale dell'elemento.

Si può osservare che l'elemento posizionato assoluto è stato allineato al centro:

Metodo 2: come centrare l'immagine rispetto a "corpo"?

Per centrare l'immagine rispetto al corpo, prova le istruzioni fornite:

• Innanzitutto, crea un'intestazione con il "

  "Tag.

• Quindi, aggiungi un ""Tag e inserire il"id"Attributo all'interno del tag immagine. Dopodiché, il "src"L'attributo è per specificare il percorso dell'immagine:

Elemento di posizione assoluto

Stile "#immagine di posizione"

#position-img
Posizione: assoluto;
A sinistra: 50%;
Trasformazione: traduttorex (-50%);

Accedi all'ID "posizione-img"Usando il"#"Selettore e anche applicare"posizione","Sinistra", E "trasformare" proprietà.

Produzione

Abbiamo compilato i metodi per centrare l'elemento in un div con una posizione assoluta.

Conclusione

Il CSS "posizione"La proprietà viene utilizzata per centrarti un elemento assolutamente posizionato. Il suo valore è impostato come "assoluto"Per posizionare l'elemento in relazione al suo elemento genitore, che è attualmente posizionato nelle vicinanze. Inoltre, puoi anche utilizzare varie proprietà insieme alla proprietà della posizione, come ad esempio "Sinistra", E "trasformare"Per centrare l'elemento. Questo tutorial ha dimostrato le procedure per centrare l'elemento in una posizione assoluta.