itthon Biztonság Az elemek vízszintes és függőleges igazítása. Szövegigazítás az oldal közepén, szélességében, szélén HTML-ben

Az elemek vízszintes és függőleges igazítása. Szövegigazítás az oldal közepén, szélességében, szélén HTML-ben

Az elemek vízszintes és függőleges igazítása többféleképpen történhet. A módszer megválasztása függ az elem típusától (blokk vagy inline), elhelyezésének típusától, méretétől stb.

1. Vízszintes igazítás a blokk/oldal közepéhez

1.1. Ha a blokknak szélessége van:

div (szélesség: 300 képpont; margó: 0 automatikus; /*az elem vízszintes középre helyezése a szülőblokkon belül*/)

Ha egy soron belüli elemet így akarunk igazítani, akkor be kell állítani, hogy megjelenítse: blokk;

1.2. Ha egy blokk egy másik blokkba van beágyazva, és nincs beállítva szélessége:

.wrapper(text-align:center;)

1.3. Ha a blokk szélességű, és a szülőblokk közepén kell rögzíteni:

.wrapper (pozíció: relatív; /*állítsa be a szülődobozt relatív pozícióba, hogy a későbbiekben feltétlenül el tudjuk helyezni a dobozt*/) .box ( szélesség: 400px; pozíció: abszolút; bal: 50%; margó-bal: - 200 képpont; / *a blokkot balra tolja a szélességének felével egyenlő távolsággal*/ )

1.4. Ha nincs beállítva szélesség a blokkokhoz, középre állíthatja a szülő burkolóblokkot:

.wrapper (text-align: center; /*a blokk tartalmának középre helyezése*/) behúzás a blokkok között*/ )

2. Függőleges igazítás

2.1. Ha a szöveg egy sort foglal el, például gomboknál és menüelemeknél:

.button ( magasság: 50 képpont; vonalmagasság: 50 képpont; )

2.2. Egy blokk függőleges igazítása a szülőblokkon belül:

.wrapper (pozíció: relatív;) .box ( magasság: 100px; pozíció: abszolút; felső: 50%; margó: -50px 0 0 0; )

2.3. Függőleges igazítás táblázattípus szerint:

.wrapper ( kijelző: táblázat; szélesség: 100%; ) .box ( kijelző: táblázatcella; magasság: 100 képpont; szöveg igazítása: középre; függőleges igazítás: középre; )

2.4. Ha a doboz szélessége és magassága be van állítva, és a szülődoboz közepére kell helyezni:

.wrapper ( pozíció: relatív; ) .box ( magasság: 100 képpont; szélesség: 100 képpont; pozíció: abszolút; felül: 0; jobbra: 0; alul: 0; balra: 0; margó: automatikus; túlcsordulás: automatikus; /*to a tartalom nem terjedt el */ )

2.5. Abszolút pozicionálás az oldal/blokk közepére CSS3 transzformációval:

ha az elemnek vannak méretei

div ( szélesség: 300 képpont; /*blokk szélességének beállítása*/ magasság: 100 képpont; /*blokk magasságának beállítása*/ transzformáció: translate(-50%, -50%); pozíció: abszolút; felül: 50%; balra: 50% ;)

ha az elemnek nincsenek méretei és nem üres

Itt egy kis szöveg

h1 ( margó: 0; átalakítás: fordítás (-50%, -50%); pozíció: abszolút; felül: 50%; bal: 50%; )

Nagyon gyakran az a feladat, hogy a blokkot az oldal / képernyő közepéhez igazítsák, és még úgy is, hogy java szkript nélkül, kemény méretek vagy negatív behúzások beállítása nélkül, hogy a görgetősávok működjenek a szülőn, ha a blokk meghaladja a méretét. Elég sok monoton példa van a neten arra, hogyan kell egy blokkot a képernyő közepéhez igazítani. Általában ezek többsége ugyanazokon az elveken alapul.

Az alábbiakban bemutatjuk a probléma megoldásának fő módjait, azok előnyeit és hátrányait. A példák lényegének megértéséhez azt javaslom, hogy csökkentse az Eredmény ablak magasságát / szélességét a példákban a feltüntetett hivatkozásokon.

1. lehetőség. Negatív padding.

Elhelyezés Blokk felső és bal attribútumokat 50%-kal, és a blokk magasságának és szélességének előzetes ismeretében állítson be negatív margót, amely egyenlő a méret felével Blokk. Hatalmas mínusz ezt a lehetőséget az, hogy meg kell számolni a negatív behúzásokat. Ugyanilyen módon Blokk nem egészen megfelelően viselkedik a görgetősávok környezetében – egyszerűen le van vágva, mert negatív behúzásai vannak.

Szülő (szélesség: 100%; magasság: 100%; pozíció: abszolút; felül: 0; bal: 0; túlcsordulás: automatikus; ) .block (szélesség: 250 képpont; magasság: 250 képpont; pozíció: abszolút; felül: 50%; bal : 50%; margó: -125px 0 0 -125px; img (max. szélesség: 100%; magasság: automatikus; kijelző: blokk; margó: 0 automatikus; szegély: nincs; ) )

2. lehetőség: Automatikus behúzás.

Kevésbé gyakori, de hasonló az elsőhöz. Mert Blokkállítsa be a szélességet és a magasságot, állítsa a jobb felső bal alsó attribútumokat 0-ra, és állítsa be a margót auto. Ennek az opciónak az előnye a működő görgetősávok szülő, ha az utóbbi 100%-os szélességgel és magassággal rendelkezik. Ennek a módszernek a hátránya a merev méretezés.

Szülő (szélesség: 100%; magasság: 100%; pozíció: abszolút; felül: 0; bal: 0; túlcsordulás: automatikus; ) .block ( szélesség: 250 képpont; magasság: 250 képpont; pozíció: abszolút; felül: 0; jobbra: 0; alsó: 0; bal: 0; margó: automatikus; img (max. szélesség: 100%; magasság: automatikus; kijelző: blokk; margó: 0 automatikus; szegély: nincs; ) )

3. lehetőség Táblázat.

Kérünk szülő táblázatstílusok, cella szülő Szöveg igazításának beállítása középre. DE blokkállítsa be az inline blokk modellt. A hátrányok nem működő görgetősávok, és általában nem a táblázat "emulációjának" esztétikája.

Szülő ( szélesség: 100%; magasság: 100%; kijelző: asztal; pozíció: abszolút; felül: 0; bal: 0; > .inner ( kijelző: táblázatcella; szöveg igazítása: középen; függőleges igazítás: középen; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )

Ha görgetést szeretne hozzáadni ehhez a példához, még egy elemet kell hozzáadnia a szerkezethez.
Példa: jsfiddle.net/serdidg/fk5nqh52/3 .

4. lehetőség. Pszeudoelem.

Ez az opció mentes az előző módszerekben felsorolt összes problémától, és megoldja az eredeti feladatokat is. A lényeg, hogy legyen szülő stílusok beállítása pszeudo elem előtt, nevezetesen 100%-os magasság, középre igazítás és soros dobozos modell. Ugyanazzal Blokk helyezze be a soros blokk modelljét, középre igazítást. Nak nek Blokk nem esett alá pszeudo elem amikor az első méretei nagyobbak, mint szülő, adja meg szülő white-space: nowrap és font-size: 0, utána y Blokk törölje ezeket a stílusokat a következővel - szóköz: normál. NÁL NÉL ezt a példát font-size: 0 szükséges a kapott szóköz eltávolításához szülőés Blokk kódformázással kapcsolatban. A rést más módon is el lehet távolítani, de a legjobbnak tartják, ha egyszerűen nem engedjük meg.

Szülő (szélesség: 100%; magasság: 100%; pozíció: abszolút; felül: 0; bal: 0; túlcsordulás: automatikus; szóköz: törlés nélkül; szövegigazítás: középre; betűméret: 0; &:before ( magasság: 100%; kijelző: soron belüli blokk; függőleges igazítás: középen; tartalom: ""; ) ) .block ( kijelző: soron belüli blokk; szóköz: normál; függőleges igazítás: középen; szöveg igazítása: balra ; img ( kijelző: blokk; szegély: nincs; ) )

Vagy ha azt szeretné, hogy a szülő csak az ablak magasságát és szélességét foglalja el, ne a teljes oldalt:

Szülő (pozíció: rögzített; felül: 0; jobb: 0; lent: 0; bal: 0; túlcsordulás: automatikus; szóköz: nincs tördelve; szöveg igazítása: középen; betűméret: 0; &:before ( magasság: 100%; kijelző: soron belüli blokk; függőleges igazítás: középen; tartalom: ""; ) ) .block ( kijelző: inline-block; szóköz: normál; függőleges igazítás: középen; szöveg igazítása: balra; img ( kijelző: blokk; szegély: nincs; ) )

5. lehetőség Flexbox.

Az egyik legegyszerűbb és legelegánsabb módja a flexbox használata. Nem igényel felesleges testmozgásokat, elég világosan leírja a történések lényegét, és nagy rugalmassággal rendelkezik. Az egyetlen dolog, amit emlékezni kell a választás során ez a módszer- IE támogatása a 10-es verziótól kezdve. caniuse.com/#feat=flexbox

Szülő (szélesség: 100%; magasság: 100%; pozíció: rögzített; felül: 0; bal: 0; kijelző: hajlító; elemek igazítása: középre; tartalom igazítása: középre; igazítás-tartalom: középen; túlcsordulás: automatikus; ) .block ( háttér: #60a839; img ( kijelző: blokk; keret: nincs; ) )

6. lehetőség. Átalakítás.

Alkalmas, ha korlátoz minket a szerkezet, és nincs mód a manipulációra szülő elem, és a blokkot valahogy igazítani kell. A translate() css függvény fog segíteni. 50%-os értékkel abszolút pozicionálás pontosan középre helyezi a doboz bal felső sarkát, akkor a negatív fordítási érték elmozdítja a dobozt a saját méreteihez képest. Felhívjuk figyelmét, hogy a negatív hatások elmosódott szélek vagy betűstílus formájában jelenhetnek meg. Ezenkívül egy hasonló módszer problémákhoz vezethet a blokk helyzetének kiszámításakor java-script használatával. css használat a bal oldali tulajdonságon segíthet a blokkra beállított szabály: margó-jobb: -50%; .

Szülő (szélesség: 100%; magasság: 100%; pozíció: rögzített; felül: 0; bal: 0; túlcsordulás: automatikus; ) .block ( pozíció: abszolút; felül: 50%; bal: 50%; átalakítás: fordítás -50%, -50%); img ( kijelző: blokk; ) )

Opció 7. Gomb.

Felhasználói opció hol Blokk gombcédulába csomagolva. A gomb képes mindent középre állítani, ami benne van, nevezetesen a beépített és a blokkvonalas (inline-block) modell elemeit. A gyakorlatban nem ajánlom.

Szülő (szélesség: 100%; magasság: 100%; pozíció: abszolút; felül: 0; bal: 0; túlcsordulás: automatikus; háttér: nincs; szegély: nincs; körvonal: nincs; ) .block ( kijelző: inline-block; img ( kijelző: blokk;; keret: nincs; ) )

Bónusz

A 4. lehetőség ötletével margókat állíthat be Blokk, és egyben ez utóbbi megfelelően megjelenik a görgetősávok környezetében.
Példa: jsfiddle.net/serdidg/nfqg9rza/2 .

A képet középre is igazíthatja, és ha nagyobb a kép szülő, méretezheti méretre szülő.
Példa: jsfiddle.net/serdidg/nfqg9rza/3 .
Példa nagy képre:

Vlad Merzsevics

Tekintettel arra, hogy a táblázatcellák tartalma egyidejűleg vízszintesen és függőlegesen is igazítható, az elemek egymáshoz viszonyított helyzetének szabályozási lehetőségei bővülnek. A táblázatok segítségével beállíthatja a képek, szövegek, űrlapmezők és egyéb elemek egymáshoz és a weboldal egészéhez viszonyított igazítását. Általánosságban elmondható, hogy az igazítás elsősorban a különböző elemek közötti vizuális kapcsolat kialakításához, illetve csoportosításához szükséges.

Függőleges központosítás

Az egyik módja annak, hogy megmutassa a látogatónak a webhely fókuszát és címét, ha splash oldalt használ. Ez az első oldal, amelyen általában egy flash-intro vagy egy kép található, amely kifejezi az oldal fő gondolatát. A kép egyben link az oldal más részeire is. Ezt a képet a böngészőablak közepére kell helyezni, a monitor felbontásától függetlenül. Erre a célra használhat egy 100%-os szélességű és magasságú táblázatot (1. példa).

1. példa: Kép középre állítása

igazítás

Ebben a példában a vízszintes igazítás az align="center" címkeparaméterrel van beállítva , és a cella tartalmát nem kell függőlegesen középre igazítani, mivel alapértelmezés szerint ez a pozíció van beállítva.

Az asztal magasságának 100%-ra állításához távolítsa el, a kód már nem érvényes.

A szélesség és magasság használata a weboldal teljes elérhető területén biztosítja, hogy a táblázat tartalma szigorúan a böngészőablak közepéhez igazodjon, függetlenül annak méretétől.

Vízszintes igazítás

Az align (vízszintes igazítás) és a valign ( függőleges igazítás) címke , az elemek egymáshoz viszonyított helyzetének többféle típusa is megengedhető. ábrán. Az 1. ábra az elemek vízszintes igazítását mutatja be.

Nézzünk néhány példát a szöveg igazítására az alábbi ábra szerint.

Felső igazítás

A cella tartalmának a tetejéhez igazításának megadása a címkéhez a valign attribútumot a top értékkel kell beállítani (2. példa).

2. példa: valign használata

igazítás

1. oszlop

2. oszlop

Ebben a példában a cella jellemzőit címkeparaméterekkel szabályozzuk , de stílusokon keresztül is kényelmesebb váltani. A cellaigazítást a függőleges igazítás és a szövegigazítás tulajdonságai határozzák meg (3. példa).

3. példa: Stílusok alkalmazása az igazításhoz

igazítás

1. oszlop

2. oszlop

A kód lerövidítéséhez ez a példa választócsoportosítást használ, mivel a függőleges igazítás és a kitöltési tulajdonságok egyszerre két cellára vonatkoznak.

Az alsó igazítás ugyanúgy történik, de a felső helyett az alsót használják.

Középre igazítás

Alapértelmezés szerint egy cella tartalma a függőleges középpontjához igazodik, így eltérő oszlopmagasság esetén az igazítást a tetejére kell állítani. Néha még mindig meg kell hagynia az eredeti igazítási módszert, például képletek elhelyezésekor, amint az az ábrán látható. 2.

Ebben az esetben a képlet szigorúan a böngészőablak közepén található, a száma pedig a jobb szélen. Az elemek ilyen elrendezéséhez három cellával rendelkező táblázatra van szükség. A külső celláknak azonos méretűeknek kell lenniük, a középső cellában az igazítás középen, a jobb oldali cellában pedig a jobb szélen történik (4. példa). Ez a számú cella szükséges a képlet középre állításához.

4. példa: Képlet igazítása

igazítás

(18.6)

Ebben a példában a táblázat első cellája üresen marad, csak egy behúzás létrehozására szolgál, amit egyébként stílusok segítségével is beállíthatunk.

Űrlapelemek igazítása

A táblázatok hasznosak az űrlapmezők elhelyezéséhez, különösen akkor, ha szöveggel vannak tarkítva. Az űrlap egyik tervezési lehetősége, amely megjegyzés bevitelére szolgál, az ábrán látható. 3.

Ahhoz, hogy az űrlapmezők közelében lévő szöveg jobbra, maguk az űrlapelemek pedig balra legyenek igazítva, szükség van egy láthatatlan szegéllyel és két oszloppal rendelkező táblázatra. A bal oldali oszlop magát a szöveget tartalmazza, a jobb oldali pedig szövegmezőket (5. példa).

5. példa Űrlapmezők igazítása

igazítás

Ebben a példában az align="right" attribútumot hozzáadtuk a jobbra igazítást igénylő cellákhoz. Annak érdekében, hogy a „Megjegyzés” címke a többsoros szöveg felső szegélyén legyen, a megfelelő cellát a valign attribútum használatával felülre kell igazítani.