Arrangement av innholdet som vises på et nettsted er svært viktig når det gjelder å gjøre nettstedet ditt utsøkt behagelig og forbedre brukeropplevelsen. Innhold kan være et HTML-element (inline eller blokknivå), litt tekst, et bilde osv. Det er forskjellige tilnærminger tilgjengelig i CSS for å justere denne typen innhold på websiden din. I dette innlegget skal vi diskutere noen av disse tilnærmingene for å gjøre begrepet innholdsjustering klart for deg.

La oss begynne

Juster elementer på blokknivå

Det er en enorm mengde elementer som faller inn under kategorien av blokknivåelementer som for eksempel

,

til

, , etc. Du kan justere disse elementene på forskjellige måter. Vi har diskutert noen her for deg.

Hvordan du senter til å justere tekst i CSS

Du kan justere tekst ved hjelp av CSS Tekstalign eiendom. Denne egenskapen gjengir forskjellige verdier som venstre, høyre, sentrum og rettferdiggjør.

Eksempel

Anta at du vil justere litt tekst som er til stede i en DIV -beholder til høyre. Følg koden nedenfor.

Html

Denne teksten er riktig justert.

Vi plasserte en

element inne i et element og tildelte en klasse "rett" til elementet.

CSS

.Ikke sant
Tekstalign: Rett;
Grense: 3px solid lilla;

Ved hjelp av den tekst-justerte egenskapen justerer vi teksten til høyre side av DIV-beholderen.

Produksjon

Teksten er på linje med høyre ved hjelp av den tekst-justerte egenskapen.

Juster inline -elementer

Det kommer slik tid hvor vi trenger å justere inline elementer som bilder. Du kan justere disse typer elementer ved å endre elementtypen til å blokkere nivå ved hjelp.

Juster et bilde

Ved hjelp av forskjellige CSS -egenskaper som for eksempel vise, margin-venstre, eller margin-høyre, Du kan justere et bilde i hvilken stil du vil.

Eksempel

Anta at du vil midtre i samsvar med et bilde horisontalt bortsett fra om det er i en beholder eller ikke.

Html

Her har vi satt inn et bilde ved hjelp av taggen.

CSS

IMG
Display: Block;
margin-venstre: auto;
Margin-høyre: auto;
Bredde: 50%;

For å midtre justere et bilde horisontalt, sett skjermen til blokkering, og begge marginene (venstre og høyre) til auto. Dessuten kan du gi litt bredde eller høyde etter eget valg.

Produksjon

Bildet er midtjustert vellykket.

Horisontal innretting

La oss utforske forskjellige tilnærminger som kan brukes til å samkjøre elementer på blokknivå horisontalt.

Hvordan midtre justere et element

La oss anta at du har en, og at du vil at den bare skal ta en spesifisert mengde plass i stedet for å ta opp hele det horisontale rommet og justere det i midten av siden. Slik gjør du det.

Html

Justere innhold i CSS

Her har vi laget et element og nestet en

element i det.

CSS

.senter
polstring: 5px;
Margin: Auto;
Bredde: 70%;
Grense: 3px solid lilla;

Nå for Div -elementet å ta opp det spesifiserte rommet bare slik at det ikke strekker seg ut til hjørnene på beholderen, gi den litt bredde. For å midtre justere den horisontalt, sett marginen til auto.

Produksjon

Diven har blitt midtjustert vellykket.

Hvordan justere elementer ved hjelp av posisjonseiendommer

I dette eksemplet vil vi samkjøre en DIV -beholder til høyre ved å bruke den absolutte verdien av posisjonsegenskapen.

Html

Justere elementer ved hjelp av CSS Position -egenskap

Denne diven er på linje med høyre ved å bruke den aboslute verdien av CSS -posisjonens egenskap.

Her har vi opprettet to DIV -containere for å forstå arbeidet med absolutt verdi av posisjonseiendommen. Klassen “Div” er tildelt den første div -taggen, og klassen “Green” er tildelt den andre div -taggen.

CSS

.div
polstring: 15px;
Border: 3px solid svart;

.grønn
Posisjon: Absolutt;
Til høyre: 1%;
Topp: 15%;
Bredde: 300px;
Grense: 3px solid grønn;
polstring: 10px;

Begge DIV -containere har fått en vis. Nå Second Div vil være på linje med hensyn til stillingen til Første div.

Produksjon

Den "grønne" diven har vært absolutt plassert med hensyn til den første divet ved hjelp av CSS -posisjonseiendommen.

Hvordan justere elementer ved hjelp av float -egenskapen.

Anta at du vil flyte en div beholder til høyre side av siden.

Html

Hei Verden!

I koden ovenfor har vi opprettet en div container og nestet en

element i det.

CSS

.Ikke sant
FLOAT: HØYRE;
Bredde: 300px;
Grense: 3px solid lilla;
polstring: 5px;

Ved hjelp av float -egenskapen flyter vi hele diven og innholdet inni den til høyre.

Produksjon

DIV -beholderen er flyttet til høyre.

Vertikal justering

Her har vi forklart noen måter du kan bruke til å samkjøre elementer vertikalt.

Hvordan justere elementer vertikalt ved hjelp av polstring

Anta at du vil ha vertikalt sentrere litt tekst til stede i en DIV -beholder.

Html

Dette avsnittet er sentrert vertikalt.

Her har vi laget et divelement og nestet en

element inni det.

CSS

.senter
Polstring: 80px 0;
Grense: 3px solid lilla;

I ovennevnte CSS -kode gir vi polstring av 80px fra topp og nederst og 0px fra venstre og høyre 0px til

Tag to Center juster den inne i diven.

Produksjon

Teksten er midtjustert vellykket.

Hvordan justere elementer ved hjelp av linjehøyde

Ved å bruke det samme eksemplet som ovenfor, kan vi sentrere til å justere tekst ved å bruke CSS Line-Height-egenskapen også.

CSS

.senter
linjehøyde: 200px;
Grense: 3px solid lilla;
tekst-align: sentrum;

.senter p
linjehøyde: 1.5;
Display: Inline-block;

Bare sett linjehøyden til DIV-beholderen til 200px og sett deretter linjehøyden til

element til 1.5.

Produksjon

HTML-elementene er blitt justert vertikalt så vel som horisontalt ved bruk av linjehøyde.

Hvordan justere elementer vertikalt ved hjelp av flexbox

Igjen vurderer vi det samme eksemplet og bruker Flexbox denne gangen til vertikalt og horisontalt justerer elementer.

CSS

.senter
Display: Flex;
Justify-Content: Center;
Align-elementer: sentrum;
Høyde: 200px;
Grense: 3px solid grønn;

Her setter vi visningen av DIV-beholderen som flex og senter som justerer innholdet og elementene som er til stede inne i DIV-beholderen ved hjelp av Justify-Content og Align-Items-egenskapene levert av Flex-Box CSS. Videre gir vi også en viss høyde og grense til det også.

Produksjon

Teksten er vellykket midtjustert (både vertikalt og horisontalt) ved hjelp av Flexbox.

Konklusjon

Det er forskjellige tilnærminger som. Videre kan du bruke disse egenskapene til å justere tekst og bilder som vises på nettstedet ditt. Vi har diskutert i detalj noen forskjellige tilnærminger langs passende eksempler, som kommer godt med når du arbeider med justering av innholdet på websidene dine.