HTML-keskiteksti - DivS: n pystysuuntainen kohdistaminen

HTML- ja CSS-maailmassa on kyse asettelurakenteesta ja elementtien jakelusta. Käytämme yleensä HTML-koodia määrittelemään merkinnät ja rakenteen, kun taas CSS auttaa meitä käsittelemään elementtien muotoilua ja kohdistusta.

Tässä viestissä aiomme oppia hieman eri tavoista, joilla voimme keskittää HTML-elementit ja käsitellä pystysuoraa kohdistusta CSS: n kanssa.

Ensin opimme tekstin kohdistamisen CSS: n kanssa.

Seuraavaksi käsitellään div: n ja muiden elementtien kohdistamista.

Ja lopuksi opimme, miten voimme laittaa tekstin ja a divyhteen säiliöön.

Kuinka keskittää teksti

CSS: llä on monia tapoja keskittää teksti.

Float-ominaisuuden käyttäminen

Float on helppo tapa kohdistaa tekstiä.

Jos haluat sijoittaa tekstin asettelun oikealle puolelle, voimme yksinkertaisesti käyttää right  sitä arvona float.

Sijoita teksti vasemmalle puolelle left, kuten float:left. Katso alla olevaa esimerkkiä:

 .right { float: right; } .left { float: left; } // HTML Right Left

Keskittääksesi tekstiä kellua voimme käyttää margin-lefttai margin-rightja tehdä se   50%, kuten alla.

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

Voit oppia lisää Floattäältä.

Tekstin tasaus -toiminnon käyttäminen

text-alignon helpompi ja tarkempi tapa kohdistaa tekstiä. Sen avulla voimme sijoittaa tekstin centersivulle lefttai rightsivulle, kuten seuraava esimerkki osoittaa:

.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ 

Right

Center

Left

Lisätietoja text-align.

Kuinka kohdistaa a div

No, siihen on paljon tapoja.

Samalla tavalla Floatkuin tekstin tasaamiseen, voimme käyttää sitä myös divelementin tasaamiseen .

Floattekee työn, mutta CSS tarjoaa meille parempia vaihtoehtoja, jotka ovat mukavampia ja tyylikkäempiä. Oletko kuullut Flexbox? Tai css-ruudukko?

Nämä kaksi menetelmää tarjoavat hyvin moderneja tapoja mukautua ulkoasuun CSS: ssä. Katsotaanpa Flexboxia tarkemmin.

Flexbox  

Flexbox tarjoaa helpon ja suoraviivaisen tavan kohdistaa div- ja se on toistaiseksi suosikkitapani käsitellä asetteluja CSS: ssä (käytän sitä päivittäin).

Katsotaanpa, mitä tekisimme Flexboxnähdäksesi, miten se toimii, luomalla uudelleen sama esimerkki kuin yllä.

Esimerkki:

Koodi:

      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 

hajotetaan se

  • Määritämme aina div  vanhemman display:flexhakemiseen Flexbox. Joten me saamme kaikki divin lapset vanhemman sisällä divhoidettaviksi Flexboxominaisuuksien avulla.
  • flex-directionKäyttää rowsuunta oletuksena, mikä tarkoittaa, että elementit sijoitetaan pystysuoraan säiliön sisälle.
  • Kun justify-contentomaisuus voimme tasata divlastenvaatteet (t) eri suuntiin, kuten seuraava esimerkki:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
  • justify-content:center  sijoittaa elementit astian keskelle.
  • justify-content:flex-start laittaa elementit säiliön alkuun vasemmalle.
  • justify-content:flex-end sijoittaa elementit astian päähän oikealle puolelle.
  • justify-content:space-around saa elementit mahtumaan astiaan ja sijoittaa samanlaisen rakon kaikkien elementtien välille.
  • justify-content:space-evenly jakaa emosäiliön elementit tasaisesti samalle tilalle ja samalle leveydelle.

Yllä oleva esimerkki koskee kaikkien elementtien lapsia ryhmänä.

Kuvittele, jos haluaisimme kohdistaa yhden yksittäisen divastian sisälle. Voimme aina käyttää align-selfyhden elementin tasaamiseen.

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

Voimme soveltaa tekstiin samaa asiaa Flexboxkuin seuraavassa esimerkissä:

  .right{ display: flex; align-items: flex-end; flex-direction: column; } right div 

Tämä on Julia Evansin hieno twiitti, joka kuvaa CSS: n keskittämistä yleensä:

Paketoida

CSS: ssä on monia tapoja keskittää elementtejä. Ja opit aina uusia asioita ajan myötä harjoitellessasi yhä enemmän.

Joten suosittelen, että tutkit joitain esimerkkejä tänään oppimastasi, jotta se tarttuu.

  • Sinun pitäisi seurata minua Twitter?
  • Katso My Github
  • Käy blogissani