HTML-centertekst - Sådan CSS lodret Juster en div
I HTML- og CSS-verdenen handler det om layoutstruktur og distribution af elementer. Vi bruger normalt HTML til at definere markup og struktur, mens CSS hjælper os med at håndtere styling og justering af elementer.
I dette indlæg vil vi lære lidt om de forskellige måder, hvorpå vi kan centrere HTML-elementer og håndtere lodret justering med CSS.
Først skal vi lære at tilpasse tekst til CSS.
Derefter vil vi dække, hvordan man justerer en div og andre elementer.
Og til sidst lærer vi, hvordan vi kan sætte tekst og et div
sammen i en container.
Sådan centreres tekst
Der er mange måder at centrere tekst ved hjælp af CSS.
Brug af Float-ejendommen
Flyd er en nem måde at justere tekst på.
For at placere teksten på højre side af layoutet kan vi simpelthen bruge right
som en værdi for float
.
For at placere teksten på venstre side bruger vi left
, ligesom float:left
. Se eksemplet nedenfor:
.right { float: right; } .left { float: left; } // HTML Right Left
For at centrere teksten ved hjælp af float kan vi bruge margin-left
eller margin-right
lave den 50%
, som nedenfor.
.center { float: left; margin-left: 50%; } /* HTML*/ Center
Du kan lære mere om anvendelsen Float
her.
Brug af tekstjustering
text-align
er en mere bekvem og mere specifik måde at justere tekst på. Det giver os mulighed for at placere teksten på center
eller til left
eller som right
siden, som følgende eksempel viser:
.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ Right
Center
Left
Lær mere om text-align
.
Sådan justeres en div
Der er mange måder at gøre det på.
På samme måde som vi bruger Float
til at justere tekst, kan vi også bruge den til at justere et div
element.
Float
gør jobbet, men CSS giver os bedre muligheder, der er mere bekvemme og elegante. Har du hørt om det Flexbox
? Eller css-grid?
Disse to metoder giver meget moderne måder at tilpasse og arbejde med dit layout i CSS. Lad os se på Flexbox mere detaljeret.
Flexbox
Flexbox tilbyder en nem og ligetil måde at justere en på div
- og det er min yndlingsmetode hidtil at håndtere layout i CSS (jeg bruger den hver dag).
Lad os se på, hvad vi ville gøre med for Flexbox
at se, hvordan det fungerer ved at genskabe det samme eksempel som ovenfor.
Eksemplet:
Koden:
Flexbox .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div
lad os nedbryde det
- Vi definerer altid en
div
forælder, der brugerdisplay:flex
til at ansøgeFlexbox
. Så vi gør alle div's børn i forældrene idiv
stand til at blive håndteret ved hjælp afFlexbox
egenskaber. - Den
flex-direction
brugerrow
retning som standard, hvilket betyder elementerne vil blive placeret lodret inden i beholderen. - Med
justify-content
ejendommen kan vi justerediv
barnets børn i forskellige retninger som følgende eksempel:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
justify-content:center
placerer elementerne i midten af containeren.justify-content:flex-start
sætter elementerne i begyndelsen af containeren til venstre.justify-content:flex-end
placerer elementer i enden af containeren på højre side.justify-content:space-around
får elementerne til at passe i beholderen og placerer en lige afstand mellem alle elementerne.justify-content:space-evenly
distribuerer elementerne i den overordnede container lige med samme mellemrum og samme bredde.
Eksemplet ovenfor gælder for alle elementers børn som en gruppe.
Forestil dig, hvis vi ville justere en enkelt div
inde i containeren. Vi kan altid bruge align-self
til at justere et enkelt element.
.container div{ align-self:center /* can have: flex-start, or flex-end*/ }
Vi kan anvende det samme på en tekst Flexbox
som i følgende eksempel:
.right{ display: flex; align-items: flex-end; flex-direction: column; } right div
Dette er en stor tweet af Julia Evans, der illustrerer centrering i CSS generelt:

Pak ind
Der er mange måder at centrere elementer i CSS på. Og du vil altid lære nye ting over tid, når du træner mere og mere.
Så jeg anbefaler, at du gennemgår nogle eksempler fra det, du lærte i dag, så det holder fast.
- Du skal følge mig Twitter?
- Tjek Min Github
- Besøg min blog