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 div
elhelyezni 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-left
vagy margin-right
elké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-align
a szöveg igazításának kényelmesebb és specifikusabb módja. Ez lehetővé teszi számunkra, hogy a szöveget a center
vagy az oldalra left
vagy az right
oldalra 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 Float
a szöveg igazításához használjuk, egy div
elem igazításához is.
Float
elvé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, Flexbox
hogy 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:flex
alkalmazásátFlexbox
. Tehát lehetővé tesszük, hogy a szülőben lévő div összes gyermeke tulajdonságokkaldiv
kezelhető legyenFlexbox
. - A
flex-direction
felhasználásrow
alapé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-content
ingatlannaldiv
kü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 div
a tartály belsejébe. Mindig használhatunk align-self
egyetlen elem igazítását.
.container div{ align-self:center /* can have: flex-start, or flex-end*/ }
Ugyanazt alkalmazhatjuk egy szövegre, Flexbox
mint 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