Hvordan sentrerer jeg et bilde horisontalt i bootstrap?

Mens du utvikler en hvilken som helst applikasjon, spiller bilder en viktig rolle i å styrke sin visuelle representasjon. Imidlertid må disse bildene ha riktig utforming og justering. For å justere bildene, “IMG-fluid”,“Float-Left”, Og“flyte-høyre”Klasser kan brukes. Mer spesifikt, for å midtre justere bildet, “Tekstsenter" og "MX-Auto D-Block”Klasser brukes.

Denne oppskrivningen vil forklare hvordan du kan sentrere et bilde horisontalt i bootstrap.

Forutsetning: Legg til et bilde

I HTML, legg til et bilde ved å bruke "”Tag ved å følge de gitte instruksjonene:

• > Legg til en "”Element.
• Innenfor denne "" -koden, legg til et bilde ved å bruke "” element med "SRC", "bredde" og "alt" attributter.
• “src”Angir bildebanen.
• “bredde”Justerer bildestørrelsen.
• “alt”Angir den alternative teksten i tilfelle bildet ikke kunne laste.

Html

Produksjon

Hvordan du sentrerer et bilde horisontalt i bootstrap ved hjelp av "tekstsenter" -klasse?

Bootstrap “Tekstsenter”Klassesenter justerer bildene. Denne klassen har en forhåndsdefinert CSS “Tekstalign”Eiendom med verdien”senter”Det hjelper med å sette midtpunktet av et bilde horisontalt.

Eksempel

Tilordne “Tekstsenter”Klasse til foreldrene””Element som vist her:

Produksjon

Hvordan sentrerer et bilde horisontalt i bootstrap ved å bruke "MX-Auto D-Block" -klasse?

“MX-Auto”I kombinasjon med“d-block”Klasse, justerer bildet i sentrum. "MX-Auto" er CSS "margin”Eiendom med verdien”bil”, Og egenskapen“ D-Block ”er CSS”vise”Eiendom med verdien”blokkere”.

Eksempel

La oss implementere “MX-Auto” og “D-Block” -klassene til “" -elementet og se effekten:

Produksjon

På denne måten kan du sentrere et bilde horisontalt i bootstrap.

Konklusjon

For å sentrere et bilde horisontalt i Bootstrap, først, oppretter du en HTML -fil og legger til et bilde til den ved hjelp av "" stikkord. Tilordne det de nødvendige attributtene, for eksempel “src”,“alt”,“bredde" og mer. Legg til "Tekstsenter”Klasse til bildets overordnede element for å justere midtpunktet av bildet. “MX-Auto”Klasse, i kombinasjon med“d-block”Klasse, kan også brukes til dette formålet. Denne oppskrivningen har forklart hvordan man sentrerer et bilde horisontalt ved hjelp av bootstrap.