Bootstrap Center

Bootstrap -rammeverket er et kraftig verktøy for å designe nettsteder. Det tilbyr mange klasser som har forhåndsdefinerte stiler. Mer spesifikt, i Bootstrap, kan teksten rettferdiggjøres ved å bruke "tekst-rettferdig”Klasse, og for å justere elementene i høyre, venstre og sentrum,”tekst-høyre”,“tekst-venstre”, Og“Tekstsenter”Klasser brukes. De fleksible varene kan også justeres til venstre, høyre eller sentrum ved hjelp av de spesifikke klassene.

Denne oppskrivningen vil guide deg:

• Hvordan du sentrerer teksten horisontalt ved hjelp av bootstrap?
• Hvordan du sentrerer en kolonne horisontalt ved hjelp av bootstrap?
• Hvordan du sentrerer et bilde horisontalt ved hjelp av bootstrap?

Hvordan du sentrerer teksten horisontalt ved hjelp av bootstrap?

I bootstrap kan teksten rettferdiggjøres ved å bruke "tekst-venstre”,“tekst-høyre”, Og“Tekstsenter”Klasser. “Tekstsenter”Klasse brukes ofte til å sentrere elementene horisontalt.

Eksempel

Eksemplet nedenfor viser hvordan du sentrerer teksten horisontalt ved hjelp av Bootstrap:

• Legg til en "”Element og tilordne det klassen som“Tekstsenter”.
• I denne klassen, legg til "

  ”Element for å spesifisere noe tekstinnhold.

Html

Velkommen til Linuxhint!

Det kan observeres at teksten nå har horisontalt senterjustering:

Hvordan du sentrerer en kolonne horisontalt ved hjelp av bootstrap?

Rutenettet i bootstrap består av rader og kolonner. “rad”Klasse lager en rad og“col”Definerer kolonnen.

Eksempel

For praktisk demonstrasjon, sjekk ut eksemplet nevnt nedenfor:

• Legg til en "”Element og tilordne det en klasse“ rad ”,“ d-flex ”og“ Justify-Content-Center ”.
• “d-flex”Gjør elementets skjerm flex.
• “Justify-Content-Center”Horisontalt senter justerer elementene.
• “col-4”Klasse brukes til å justere kolonnen:

sentrert kolonne

Produksjon

Hvordan du sentrerer et bilde horisontalt ved hjelp av bootstrap?

Bildeelementet kan justeres sentrum ved å bruke "d-flex”Og“Justify-Content-Center”.

Eksempel

Dette eksemplet sentrerer bildet ved å følge trinnene:

• Først, legg til en "”Element og tilordne det“d-flex”Og“Justify-Content-Center”Klasser.
• Inne i den opprettede beholderen, legg til en annen “”Med klassen“kort”.
• Innenfor "kort" -beholderen, spesifiser "kort-kroppen" som klassenavnet.
• Inkluderer "”Tag for å legge til et bilde med“src”,“alt”, Og“bredde”Attributter for å spesifisere kilden til det ekstra bildet, alternativ tekst og standardbredde.

Html

Produksjon

Det handler om hvordan du horisontalt sentrerer elementene i Bootstrap.

Konklusjon

Å sentrere elementene horisontalt, hovedsakelig "Tekstsenter”Klasse brukes. Elementene kan gjøres fleksible ved hjelp av “d-flex”Klasse. De fleksible varene kan være midt justert ved hjelp av “Justify-Content-Center”Klasse. Dette innlegget har forklart metodene for å samkjøre flere elementer horisontalt.