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 divsammen 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-lefteller margin-rightlave den   50%, som nedenfor.

 .center { float: left; margin-left: 50%; } /* HTML*/ Center

Du kan lære mere om anvendelsen Floather.

Brug af tekstjustering

text-aligner en mere bekvem og mere specifik måde at justere tekst på. Det giver os mulighed for at placere teksten på centereller til lefteller som rightsiden, 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 Floattil at justere tekst, kan vi også bruge den til at justere et divelement.

Floatgø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 Flexboxat 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 bruger display:flextil at ansøge Flexbox. Så vi gør alle div's børn i forældrene i divstand til at blive håndteret ved hjælp af Flexboxegenskaber.
  • Den   flex-directionbruger rowretning som standard, hvilket betyder elementerne vil blive placeret lodret inden i beholderen.
  • Med justify-contentejendommen kan vi justere divbarnets 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 divinde i containeren. Vi kan altid bruge align-selftil 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 Flexboxsom 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