HTML Center Text - A CSS függőleges igazítása a Div

Programozás

A HTML és CSS világban az elrendezés felépítéséről és az elemek elosztásáról van szó. Általában HTML-t használunk a jelölés és a struktúra meghatározásához, míg a CSS segít kezelni az elemek stílusát és igazítását.

Ebben a bejegyzésben megismerkedünk egy kicsit a HTML-elemek központosításának és a CSS-sel történő függőleges igazítás kezelésének különböző módjaival.

Először megtanuljuk, hogyan igazítsuk a szöveget a CSS-hez.

Ezután kitérünk a div és az egyéb elemek összehangolására.

És végül megtanuljuk, hogyan lehet szöveget és egy szöveget divelhelyezni egy konténerben.

A szöveg középre helyezése

Sokféleképpen lehet a szöveget középre állítani a CSS használatával.

Az Úszó tulajdonság használata

A lebegés a szöveg igazításának egyszerű módja.

Ahhoz, hogy a szöveget az elrendezés jobb oldalára helyezzük, egyszerűen felhasználhatjuk right  a float.

Ahhoz, hogy a szöveg a bal oldalon, az általunk használt left, mint a float:left. Nézze meg az alábbi példát:

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

A szöveg float használatával történő központosításához használhatjuk margin-leftvagy margin-rightelkészíthetjük   50%, mint az alábbiakban.

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

Itt többet megtudhat a felhasználásról Float.

A Text-align használata

text-aligna szöveg igazításának kényelmesebb és specifikusabb módja. Ez lehetővé teszi számunkra, hogy a szöveget a centervagy az oldalra leftvagy az rightoldalra helyezzük , amint azt a következő példa mutatja:

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

További információ text-align.

Hogyan lehet összehangolni a div

Nos, erre rengeteg módszer létezik.

Ugyanúgy, ahogyan Floata szöveg igazításához használjuk, egy divelem igazításához is.

Floatelvégzi a munkát, de a CSS jobb lehetőségeket kínál számunkra, amelyek kényelmesebbek és elegánsabbak. Hallottál már róla Flexbox? Vagy css-rács?

Nos, ez a két módszer nagyon modern módszereket kínál az elrendezéshez való igazodáshoz és a CSS-ben való munkához. Nézzük meg részletesebben a Flexbox-ot.

Flexbox  

A Flexbox egyszerű és egyszerű módot kínál a div- és ez az eddigi kedvenc módszerem az elrendezések CSS-ben történő kezelésére (mindennap használom).

Nézzük meg, hogy mit csinálnánk, Flexboxhogy lássuk, hogyan működik, a fenti példa létrehozásával.

A példa:

A kód:

      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

bontsuk le

  • Mindig meghatározzuk a div  szülő display:flexalkalmazását Flexbox. Tehát lehetővé tesszük, hogy a szülőben lévő div összes gyermeke tulajdonságokkal divkezelhető legyen Flexbox.
  • A   flex-directionfelhasználás rowalapértelmezés szerint az irányt használja , ami azt jelenti, hogy az elemek függőlegesen kerülnek a tárolóba.
  • Az justify-contentingatlannal divkülönböző irányokba igazíthatjuk a gyermekeit, például a következő példát:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
  • justify-content:center  az elemeket a tartály közepére helyezi.
  • justify-content:flex-start a bal oldali tartály elejére helyezi az elemeket.
  • justify-content:flex-end az elemeket a tartály végén helyezi el a jobb oldalon.
  • justify-content:space-around teszi az elemeket a tartályba, és egyenlő rést tesz az összes elem közé.
  • justify-content:space-evenly a szülőtartályon belüli elemeket egyenlően osztja el ugyanazzal a térrel és azonos szélességgel.

A fenti példa minden elem gyermekére mint csoportra vonatkozik.

Képzelje el, ha egyetlen elemet akarunk igazítani diva tartály belsejébe. Mindig használhatunk align-selfegyetlen elem igazítását.

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

Ugyanazt alkalmazhatjuk egy szövegre, Flexboxmint a következő példában:

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

Ez Julia Evans nagyszerű tweetje, amely szemlélteti a CSS-ben történő központosítást általában:

Tekerje be

Sokféleképpen lehet központosítani az elemeket a CSS-ben. És az idő múlásával mindig új dolgokat fog megtudni, miközben egyre többet gyakorol.

Ezért azt javaslom, hogy dolgozzon át néhány példát a ma tanultakból, hogy az ragaszkodjon.

  • Kövess engem Twitteren?
  • Nézze meg a My Github-ot
  • Látogassa meg a blogomat