A szerzőtől:Üdvözöllek újra blogoldalainkon. A mai cikkben a különböző igazítási technikákról szeretnék beszélni, amelyek mind blokkokra, mind azok tartalmára alkalmazhatók. Különösen a blokkok igazítása css-ben, valamint a szövegigazítás.

Igazítsa a blokkokat középre

Könnyű egy blokkot középre állítani css-ben. Sokak számára ez a leghíresebb technika, de most először is erről szeretnék beszélni. Ez a szülőelemhez képest vízszintesen középre kell állítani. Hogyan történik? Tegyük fel, hogy van egy konténerünk és benne van a tesztalanyunk:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Tegyük fel, hogy ez a webhely fejléce. Nem fedi le az ablak teljes szélességét, és középre kell helyeznünk. Így írunk:

#fejléc( szélesség / max - szélesség : 800 képpont ; margó : 0 auto ;

Meg kell adnunk a pontos vagy maximális szélességet, majd írjuk be a kulcstulajdonságot - margó: 0 auto. Beállítja a margókat a fejlécünkhöz, az első érték határozza meg a margókat felülről és alulról, a második pedig jobbra és balra. Az auto érték arra utasítja a böngészőt, hogy automatikusan számítsa ki a kitöltést mindkét oldalon, hogy az elem pontosan a szülőelem közepére kerüljön. Kényelmes!

Szöveg igazítása

Ez is egy nagyon egyszerű trükk. Az összes soron belüli elem igazításához használhatja a text-align tulajdonságot és értékeit: balra, jobbra, középre. Ez utóbbi középre állítja a szöveget, amit szeretnénk. Akár egy képet is lehet ugyanígy igazítani, mert az is alapból beépített elem.

Szöveg igazítása függőlegesen

De ez már nehezebb. Alapértelmezés szerint nincs olyan egyszerű, jól ismert tulajdonság, amely könnyedén középre helyezné a szöveget egy blokktárolóban függőlegesen. Azonban több trükköt is kitaláltak az elrendezéstervezők az évek során.

Állítsa be a blokk magasságát a párnázás segítségével. Ennek módja az, hogy ne állítsunk be explicit magasságot a magassággal, hanem mesterségesen hozzuk létre felső és alsó párnákkal, amelyeknek azonosnak kell lenniük. Hozzunk létre egy tetszőleges blokkot, és írjuk rá a következő tulajdonságokat:

div( háttér: #cc; kitöltés: 30px 0; )

div ( háttér : #ccc; padding : 30px 0 ;

A háttér csak azért van, hogy vizuálisan lássa a széleket, valamint a párnázást. Most a blokk magassága ebből a két behúzásból és magából a vonalból áll, és mindez így néz ki:

Adja meg a blokk vonalmagasságát. Szerintem több A helyes út ha egy szövegsort kell igazítania. Ezzel rögzítheti a normál magasságot a height tulajdonság segítségével. Ezután be kell állítania a vonal magasságát is, ami megegyezik a blokk egészének magasságával.

div( magasság: 60 képpont; vonalmagasság: 60 képpont; )

div ( magasság: 60 képpont vonalmagasság: 60 képpont;

Az eredmény hasonló lesz a fenti képhez. Minden működni fog akkor is, ha párnázatot ad hozzá. Azonban csak egy sorra. Ha több szövegre van szüksége egy elemben, akkor Ily módon nem fog működni.

Blokk átalakítása táblázatcellává. Ennek a módszernek az a lényege, hogy a függőleges-illesztés: közép tulajdonság hat a táblázatcellára, amely az elemet függőlegesen központosítja. Ennek megfelelően ebben az esetben a blokkot a következőkre kell beállítani:

div(megjelenítés: táblázatcella; függőleges igazítás: középső; )

div ( kijelző : táblázat - cella ; függőleges - igazítás: középen;

Ez a módszer jó, mert tetszőleges számú szöveget igazíthat középen. De jobb, ha a display: table-t abba a blokkba állítja, amelybe a div be van ágyazva, különben nem működik.

Nos, elérkeztünk a mai utolsó trükkhöz - ez a blokkok függőleges igazítása. El kell mondanunk, hogy megint nincs olyan tulajdonság, amit kifejezetten erre szántak volna, de van néhány trükk, amivel érdemes tisztában lenni.

Állítsa be az eltolásokat százalékban. Ha ismeri a szülőelem magasságát, és egy másik blokkszintű elemet helyez el benne, akkor százalékos kitöltéssel középre állíthatja. Például a szülő magassága 600 képpont. Egy blokkot teszel bele, aminek a magassága 300 képpont. Mennyit kell hátrálni felülről és alulról, hogy középre állítsa? 150 pixel egyenként, ami a szülő magasságának 25%-a.

Ez a módszer csak akkor teszi lehetővé a központosítást, ha a méretek lehetővé teszik a számítások elvégzését. És ha van egy szülő 887 pixel magas, akkor nem fog tudni semmit pontosan írni, ez már világos.

Szúrjon be egy elemet a táblázat cellájába. Ismét, ha átalakítjuk szülő elem táblázatcellába, akkor az abba beszúrt blokk automatikusan függőlegesen középre kerül. Ehhez a szülőnek csak be kell állítania a függőleges igazítást: közép.

És ha ezen kívül margót is írunk: 0 auto, akkor az elem vízszintesen középre kerül!

Szöveg igazítást, behúzást meghatározó HTML címkék

Tipográfiában használt sorkizárt szöveg

Az alábbi példa bemutatja, hogyan kell igazítani szöveg szélességben oldalak:

align="left"	align="jobbra"
	Napról napra növekszik a szolgáltatási szektorban foglalkoztatottak száma és az információ terjesztése. Ha az elmúlt évszázadok jelképe a gazdaság és a gyár volt, akkor a jelen 21. század szimbóluma az információáramláshoz hozzáférő számítógépekkel felszerelt iroda.
align="justify"	align="center"
Napról napra növekszik a szolgáltatási szektorban foglalkoztatottak száma és az információ terjesztése. Ha az elmúlt évszázadok jelképe a gazdaság és a gyár volt, akkor a jelen 21. század szimbóluma az információáramláshoz hozzáférő számítógépekkel felszerelt iroda.	Napról napra növekszik a szolgáltatási szektorban foglalkoztatottak száma és az információ terjesztése. Ha az elmúlt évszázadok jelképe a gazdaság és a gyár volt, akkor a jelen 21. század szimbóluma az információáramláshoz hozzáférő számítógépekkel felszerelt iroda.

Az indokolási érték egységességet biztosít szöveg igazítása jobbra és balra, vagyis szélességében. Ezt a módszert széles körben használják a nyomtatásban.

Szöveg igazítása a HTML-ben középre és sorkizárásra

Igazítsa a szöveget a HTML-ben középre, a szöveget pedig jobbra:

Eredmény:

Tulajdonságok és értékek

• align="left" - meghatározza bal oldali szövegigazítás(alapértelmezett).
• align="center" - középre igazítja a szöveget.
• align="jobbra" jobbra igazítja a szöveget.

Igazítás | HTML szöveg behúzás

HTML szövegés annak behúzása az oldal bal oldalán

Termeljünk szöveg behúzás bal oldalon kétféleképpen:

Eredmény:

Megtekintés új ablakban.

Az elemek vízszintes és függőleges igazítása elvégezhető különböző utak. 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ó: auto; 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

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

2.5. Abszolút blokk pozicionálás

az oldal közepén

div ( szélesség: 500 képpont; magasság: 100 képpont; /* ha a magasság nincs kifejezetten beállítva, akkor 100% lesz */ pozíció: abszolút; felső: 0; alsó: 0; bal: 0; jobb: 0; margó: auto ;)

a blokk közepén

.wrapper ( pozíció: abszolút; ) .box ( szélesség: 100 képpont; magasság: 100 képpont; /* ha a magasság nincs kifejezetten beállítva, akkor 100% lesz */ pozíció: abszolút; felül: 0; alul: 0; balra: 0 ; jobbra: 0; margó: automatikus; )

A float tulajdonsággal rendelkező tartalmak vízszintes igazítása nagyon egyszerűen elvégezhető, és teljes mértékben keresztben is használható (Opera 8+, Firefox 3+, IE 5.5+ esetén működik).

div blokk igazítási példa

Egy úszódoboz vagy több egymásra helyezett doboz igazításához egy másik külső dobozra van szükség. A külső doboz és a belső dobozok pozíciója: abszolút; és úszó: balra; , külső hozzárendelés bal: 50%; , és a belső tömböknél jobb: 50%; . Az úszó használata: jobb; külső hozzárendelési jogot kell hozzárendelnie: 50%; , és belső blokkok balra: 50%; . Azt javaslom, hogy törölje le az úszót úgy, hogy egy blokkot helyez el, amelynek tulajdonsága világos: mindkettő; a középre igazított elemek után; .

Így a következő központosítást érheti el:

Az id = blokk-belső blokk zöld szegéllyel, az id = blokk külső blokkja pedig pontozott piros szegéllyel rendelkezik.

#blokk ( pozíció: relatív; lebegés: bal; bal: 50%; szegély: 1px szaggatott #a00; ) #blokk-belső ( pozíció: relatív; lebegés: bal; jobb: 50%; szegély: 2px tömör #0a0; kitöltés : 10px; ) #oldal ( túlcsordulás: rejtett; )

Menüpont igazítási példa

A gyakorlatban a fenti példa akkor alkalmazható, ha a webhelymenü vízszintesen van elrendezve. Figyelembe kell azonban venni azt a tényt, hogy elegendő nagy számban elemeknél (az oldal szélességének több mint fele), megjelenik a vízszintes görgetés. Ahhoz, hogy megszabaduljon tőle, alkalmaznia kell a túlcsordulási tulajdonságot a külső blokkban. Ha a menü legördülő, akkor a legördülő menü elemei ezzel a külső blokkal levághatók. A probléma elkerülése érdekében a túlcsordulási tulajdonságot a blokkra a lehető legkörültekintőbben kell alkalmazni, például a kültéri egység A, amely az oldal teljes tartalmát beburkolja.

Például a menüt így igazíthatja:

Az ul lista li elemei zöld szegéllyel, az ul listáé pedig szaggatott piros szegéllyel rendelkeznek.

Az alábbi példa HTML-kódja így néz ki:

Az alábbi példa CSS-kódja így néz ki:

#menu ( pozíció: relatív; lebegés: balra; balra: 50%; szegély: 1px szaggatott #a00; listastílus: nincs; margó: 0; kitöltés: 0; ) #menu li ( pozíció: relatív; lebegés: balra; jobbra: 50%; szegély: 2px tömör #0a0; kitöltés: 10px; ) #oldal (túlcsordulás: rejtett; )

Szóval elég egyszerű. Sok sikert kívánok az új módszerek elsajátításához.

ablakok : internet böngésző 3.0+, Firefox 1.0+, Google Chrome, Opera 3.51 – 6.xx és 9.0+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.0+, Chromium, Opera 5.0 – 6.xx és 9.0+, SeaMonkey 1.0+ [2].

Az oldal tartalmának igazítása középre a böngészőablak látható területén HTML használatával - CSS nélkül. A tároló, amelyben a weboldal tartalma elhelyezkedni fog, középre van állítva – szélességben és magasságban is: [ Mintaoldal megnyitása ].

És a Netscape 2.02-4.80 és az Offbyone verziókban is. A Netscape 2.02 - 4.80-ban az oldal tartalma némileg eltolódik a böngészőablak látható területének bal felső sarkába, mivel ezek a programok helyet foglalnak el a görgetősávok számára.

És a Netscape 2.02-4.80-ban is. A Netscape 2.02 - 4.80-ban az oldal tartalma némileg eltolódik a böngészőablak látható területének bal felső sarkába, mivel ezek a programok helyet foglalnak el a görgetősávok számára.

Aliosque subditos et thema

Ahhoz, hogy DOS-ban képernyőképeket készítsen, számos program létezik. Például a SNARF. Ennek az alkalmazásnak a használatával a legtöbb esetben lehetett képernyőképeket készíteni. A SNARF által készített képernyőképek (.BMP fájlok) minősége is a legjobb a tesztelt programok között: ScreenThief, VideoThief, FLIP, GRABBER, SNARF. A SNARF használata az alapértelmezett beállításokkal egyszerű, de van egy hátránya – a SNARF mindig abba a mappába menti a képernyőképet, ahol a felhasználó éppen tartózkodik. Ami kényelmetlen vagy elfogadhatatlan lehet. És nincs nyilvánvaló mód ezen változtatni. Van azonban egy megoldás. Az eredeti ötlet ezen a linken található. Ennek alapján a következők történtek: 1. SNARF [ Letöltés ] 2. Használat szöveg szerkesztő nyissa meg a SNARF.EXE fájlt szöveges módban, keresse meg a snarf000.bmp fájlt, és módosítsa az s:scn000.bin mappára, amelybe a képernyőképek mentésre kerülnek, amikor a SNARF fut. A mappa és az elérési út tetszőleges lehet: C:\SOFT\SNARF.EXE SUBST S: C:\SCREENS\ 4. Futtassa a SNARF-t: S [vagy S.BAT] 5. Képernyőkép készítése: Alt + S legyen kettő hangjelzés. Az első az elején, a második pedig a folyamat sikeres befejezésének jele. A képernyőképek elkészítése után el kell lépnie a mappába, ahol elmentette azokat, és módosítania kell a fájl kiterjesztését .BIN-ről .BMP SNARF - Freeware-re.

Szöveget és képeket tartalmazó blokkelem CSS függőleges igazítása. A blokk és a beépített elemek különböző kombinációihoz működik. Példa: CSS függőleges igazítás CSS függőleges igazítás HTML / XHTML. A kód:

CSS. Kód: .parent (pozíció: relatív; bal: 0px; felül: 0px; magasság: 200px; kijelző: táblázat;) .child (pozíció: relatív; bal: 0px; felül: 0px; kijelző: táblázatcella; függőleges igazítás : középen;) .childcontent (pozíció: relatív; bal: 0px; felül: 0px;) Megjegyzés: A .parent és .childcontent lehet balra igazítva ("float: left;") vagy igazítás nélkül, de ez a függőleges mód CSS-igazítás dolgozott, a .gyerek "lebegés: balra;" nélkül legyen. [ 1 ] Netscape 6.01+, Mozilla 0.6+ verziókban is. [ 2 ] Netscape 6.01+, Mozilla 0.6+ verziókban is.