Come faccio a centrare elementi galleggiati?

In CSS, il “galleggiante"La proprietà viene aggiunta per impostare l'allineamento orizzontale degli elementi. Tuttavia, questa proprietà offre il resto degli elementi per avvolgerlo in modo che gli elementi fluttuano solo nella direzione destra e sinistra del corpo genitore.

In HTML, gli elementi galleggiati si riferiscono ad elementi al di fuori del flusso normale del contenuto ma ancora parte di esso. La posizione dell'elemento galleggiato viene regolata usando "Sinistra" E "Giusto" proprietà. Nel layout CSS, fluttuare gli elementi direttamente al centro non è possibile. Pertanto, possiamo impostare il suo margine per ottenere la funzionalità desiderata.

Questo articolo discuterà di come centrare gli elementi galleggianti in HTML.

Come centrarre gli elementi galleggiati?

Per centrare l'elemento galleggiato in HTML, in primo luogo, aggiungi un elemento e assegnalo una classe "float-center":

Classe "Float-Center" di stile

.float-center
larghezza: 150px;
Altezza: 150px;
Background-color: #1C6758;
Posizione: assoluto;
A sinistra: 50%;
Top: 50%;

IL "float-center"La classe è disegnata con le seguenti proprietà:

• "larghezza"Viene assegnato un valore per determinare la larghezza.
• "altezza"Viene assegnato un valore per determinare l'altezza.
• "colore di sfondo"Regola lo sfondo dell'elemento.
• "posizione"Proprietà con il"assoluto"Il valore assegna la posizione dell'elemento rispetto al
• "Sinistra"Viene utilizzato per impostare il margine sinistro dell'elemento.
• "superiore"Regola la posizione verticale dell'elemento.

Produzione

Si può osservare dall'output dato che "" non è nella posizione centrale esatta. Regoviamo la posizione dell'elemento div impostando il "margine"Proprietà come segue:

margine -sinistra: -75px;
margin -top: -75px;

Qui:

• "margine-sinistra"Regola l'area del margine sul lato sinistro dell'elemento. Il valore negativo aggiunto lo colloca più vicino all'elemento genitore.
• "margine-top"Specifica il margine negativo nella parte superiore come"-75px".

Produzione

Si può vedere che abbiamo centrato con successo l'elemento di div volato usando CSS.

Conclusione

Per posizionare gli elementi galleggiati al centro, l'importante è impostare la loro posizione. Gli elementi posizionati vengono eliminati dal flusso del documento. Quindi, per regolare il suo allineamento, le proprietà tra cui "margine-sinistra","margine-destra","margine-top", E "margin-bottom"Può essere utilizzato. Questo post ha illustrato la procedura su come centrare gli elementi galleggiati.