Hvordan sentrum av fløtelementer?

I CSS, “flyte”Eiendom blir lagt til for å angi den horisontale justeringen av elementene. Imidlertid tilbyr denne egenskapen resten av elementene å vikle rundt den, slik at elementene bare flyter i høyre og venstre retning av foreldrekroppen.

I HTML refererer de flytende elementene til elementer utenfor innholdets normale flyt, men fremdeles en del av det. Det flytende elementets posisjon justeres ved hjelp av “venstre”Og“Ikke sant" egenskaper. I CSS -oppsettet er det ikke mulig å flyte elementene direkte i sentrum. Derfor kan vi sette marginen for å oppnå ønsket funksjonalitet.

Denne oppskrivningen vil diskutere hvordan man sentrerer fløtelementer i HTML.

Hvordan du sentrerer de flytende elementene?

For å sentrere det flytende elementet i HTML, for det første, legg til et element og tilordne det en klasse “Float-Center”:

Stil "Float-Center" -klasse

.Float-Center
Bredde: 150px;
Høyde: 150px;
Bakgrunnsfarge: #1C6758;
Posisjon: Absolutt;
Venstre: 50%;
Topp: 50%;

“Float-Center”Klasse er stylet med følgende egenskaper:

• “bredde”Tildeles en verdi for å bestemme bredden.
• “høyde”Tildeles en verdi for å bestemme høyden.
• “bakgrunnsfarge”Justerer elementets bakgrunn.
• “posisjon”Eiendom med“Absolutt”Verdien tildeler elementets posisjon i forhold til
• “venstre”Brukes til å stille inn venstre marginkant av elementet.
• “topp”Justerer elementets vertikale plassering.

Produksjon

Det kan observeres fra den gitte utgangen at "" ikke er i nøyaktig sentrumsposisjon. La oss justere divelementets posisjon ved å stille inn “margin”Eiendom som følger:

margin -venstre: -75px;
Margin -top: -75px;

Her:

• “margin-venstre”Justerer marginområdet på venstre side av elementet. Den ekstra negative verdien plasserer den nærmere overordnede element.
• “margin-topp”Angir den negative marginen øverst som“-75px”.

Produksjon

Det kan sees at vi har sentrert det flytende divelementet ved hjelp av CSS.

Konklusjon

For å plassere de flytende elementene i sentrum, er det viktige å sette sin posisjon. De plasserte elementene blir tatt ut av dokumentets flyt. Deretter, for å justere dens justering, inkluderer egenskapene inkludert "margin-venstre”,“margin-høyre”,“margin-topp”, Og“marginbunn”Kan brukes. Dette innlegget har illustrert prosedyren for hvordan man sentrerer flytende elementer.