A VILÁG NAGYON WEB-FEJLESZTŐI HONLAPJA

CSS oktatói

CSS HOME CSS bevezetés CSS szintaxis CSS-választók CSS Hogyan kell CSS megjegyzések CSS színek CSS hátterek CSS határok CSS margók CSS Padding CSS magasság / szélesség CSS doboz modell CSS vázlat CSS szöveg CSS betűtípusok CSS ikonok CSS linkek CSS listák CSS táblázatok CSS kijelző CSS Max-width CSS pozíció CSS túlcsordulás CSS Float CSS Inline-blokk CSS igazítás CSS-kombinátorok CSS ál-osztály CSS ál-elem CSS átlátszatlansága CSS navigációs sáv CSS legördülő menü CSS Képgaléria CSS Image Sprites CSS Attr választók CSS-űrlapok CSS számlálók CSS weboldal elrendezése CSS egységek CSS specifitás

CSS Advanced

CSS lekerekített sarkok CSS Border Images CSS hátterek CSS színek CSS színátmenetek CSS Shadows CSS szövegeffektusok CSS webes betűtípusok CSS 2D transzformációk CSS 3D transzformációk CSS átmenetek CSS animációk CSS-tippek CSS stílus képek CSS objektumillesztés CSS gombok CSS oldalszámozás CSS több oszlop CSS felhasználói felület CSS-változók CSS doboz méretezése CSS média lekérdezések CSS MQ példák CSS Flexbox

CSS Fogékony

RWD Intro RWD nézetablak RWD Rácsnézet RWD média lekérdezések RWD képek RWD videók RWD keretrendszerek RWD sablonok

CSS Rács

Rács bevezető Rácsos konténer Rácselem

CSS Példák

CSS-sablonok CSS példák CSS Kvíz CSS gyakorlatok CSS tanúsítvány

CSS Referenciák

CSS-referencia CSS-választók CSS funkciók CSS Reference Aural CSS webes biztonságos betűtípusok CSS Animatable CSS egységek CSS PX-EM átalakító CSS színek CSS színértékek CSS alapértelmezett értékek CSS böngésző támogatás

CSS Elrendezés - Vízszintes és függőleges igazítás


Középső elemek
vízszintesen és függőlegesen


Középre igazítsa az elemeket

A blokkelem vízszintes középre állítása (például ), használja margin: auto;

Az elem szélességének beállítása megakadályozza, hogy kinyúljon a tartály széléig.

Ezután az elem felveszi a megadott szélességet, és a fennmaradó terület egyenlően oszlik meg a két margó között:

Ez a div elem középre kerül.

Példa

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}
Próbáld ki magad "

Jegyzet: A középre igazításnak nincs hatása, ha a width tulajdonság nincs beállítva (vagy 100% -ra van állítva).


Középre igazítja a szöveget

Ha csak középre szeretné helyezni a szöveget egy elem belsejében, használja text-align: center;

Ez a szöveg középre kerül.

Példa

.center {
  text-align: center;
  border: 3px solid green;
}
Próbáld ki magad "

Tipp: A szöveg igazítására vonatkozó további példákat a CSS szöveg fejezetben.



Kép középre helyezése

Kép középre állításához állítsa a bal és a jobb margót értékre auto és csináld belőle a block elem:

Párizs

Példa

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
Próbáld ki magad "

Bal és jobb igazítás - a helyzet használata

Az elemek összehangolásának egyik módszere a használat position: absolute;:

Fiatalabb és sérülékenyebb éveimben apám tanácsokat adott nekem, amelyeket azóta megfordítottam a fejemben.

Példa

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
Próbáld ki magad "

Jegyzet: Az abszolút helyzetben lévő elemek eltávolításra kerülnek a normál áramlásból, és átfedhetik az elemeket.


Bal és jobb igazítás - úszó használatával

Az elemek összehangolásának másik módszere az float ingatlan:

Példa

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
Próbáld ki magad "

Jegyzet: Ha egy elem magasabb, mint az azt tartalmazó elem, és lebeg, akkor túlárad a tartályán kívül. Használhatja aclearfix"feltörés ennek kijavítására (lásd az alábbi példát).


A clearfix Hack

Clearfix nélkül

Clearfix-el

Aztán hozzátehetjük overflow: auto; a tartalmazó elemre a probléma megoldásához:

Példa

.clearfix {
  overflow: auto;
}
Próbáld ki magad "

Függőlegesen középre - párnázással

Sokféleképpen lehet egy elemet függőlegesen középre állítani a CSS-ben. Egyszerű megoldás a felső és az alsó használat padding:

Függőlegesen középre állok.

Példa

.center {
  padding: 70px 0;
  border: 3px solid green;
}
Próbáld ki magad "

A függőleges és vízszintes középre állításhoz használja padding text-align: center:

Függőlegesen és vízszintesen középre állok.

Példa

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
Próbáld ki magad "

Függőlegesen középre - a vonalmagasság használata

Egy másik trükk a line-height tulajdonság, amelynek értéke megegyezik a height ingatlan:

Függőlegesen és vízszintesen középre állok.

Példa

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
Próbáld ki magad "

Függőlegesen középre - Pozíció és transzformáció használata

If padding line-height nem opciók, egy másik megoldás a helymeghatározás és a transform ingatlan:

Függőlegesen és vízszintesen középre állok.

Példa

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Próbáld ki magad "

Tipp: További információt a transzformációs tulajdonságról itt talál 2D átalakítások fejezet.


Középre függőlegesen - a Flexbox segítségével

A dolgok központosításához használhatja a flexboxot is. Csak vegye figyelembe, hogy a flexboxot az IE10 és a korábbi verziók nem támogatják:

Függőlegesen és vízszintesen középre állok.

Példa

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}
Próbáld ki magad "

Tipp: A Flexboxról többet megtudhat a mi oldalunkon CSS Flexbox fejezet.


Teszteld magad gyakorlatokkal!



HOGYAN KELL

Lapok
Legördülő menü
harmonikák
Oldalsó navigáció
Felső navigáció
Modális dobozok
Haladás bárok
Parallaxis
Bejelentkezési űrlap
HTML tartalmazza
Google Maps
Range csúszkák
Tooltips
diavetítés
Szűrő lista
Rendezési lista


,