Ebben a cikkben meg fogjuk érinteni a különböző középponti igazítás kérdését html elemek css tulajdonságok használatával.

Elég gyakran van szükség a div középre helyezésére vagy a tartalmának igazítására. Ennek többféle módja van. Egyes módszerek alkalmasak szövegek, képek stb. igazítására, de nem alkalmasak blokkok igazítására.

Először nézzük meg a blokktartalom, például a képek és a szöveg összehangolásának lehetőségeit. Ez a módszer szinte minden elemre vonatkozik.

Ebben az esetben minden egyszerű - a szülőelemnél beállítjuk a text-align tulajdonságot az értékközponttal . A szöveg CSS használatával történő központosításának ez a módja a legegyszerűbb és legkényelmesebb. A mélyebb megértés kedvéért mondok egy példát. Fontos észrevenni, hogy ebben az esetben csak a tartalom igazodik középre.

HTML kód:

Néhány szöveg középre igazítva a szülő törzselemhez

CSS kód:

body (text-align:center;) /*igazítsa a törzs tartalmát középre*/

Kitaláltuk a legegyszerűbb dolgot: a szöveget és a képeket CSS segítségével az oldal közepéhez igazítjuk.

Most térjünk át az elemek igazításának módjaira, például a blokktípusra (div , table ). Ebben az esetben nem a tartalmat igazítjuk középre, hanem magukat a táblázatokat, blokkokat és bekezdéseket.

Összességében két lehetőséget javaslok a CSS használatával: a margó tulajdonság és a pozíció c left tulajdonság használata. Fontos megjegyezni, hogy ezen módszerek egyike sem fog működni, hacsak nincs rögzített szélessége az elemnek, legyen az px, % vagy bármi más.

Így első lépésben el kell dönteni, hogy milyen mértékegységekben és mekkora legyen annak az elemnek a szélessége, amelyet középre szeretnénk igazítani.

Középre igazítás margó segítségével

A margó módszernél nem mindegy, hogy ezt a szélességet százalékban vagy pixelben állítja be. Ha ezzel a módszerrel szeretné központosítani, a margó tulajdonság következő értékeit 0 auto értékre kell állítania. Pontosabban, az oldalsó kitöltésnél az értéknek auto értéknek kell lennie, a felső és alsó résznél pedig bármilyen kitöltést beállíthatunk. Azok. az érték bővített változata így néz ki: 0 auto 0 auto, vagy így: 10px auto 5% auto.

Így beállíthatja az elem felső és alsó részének külső margóit, de az oldalsó margókat auto értékre kell állítani.

Ez talán a legsokoldalúbb és legkényelmesebb módja a div vagy bármely más elem középre helyezésének.

HTML kód:

CSS kód:

body (text-align:center;) div (padding:10px; color:#FFFFFF;) div.centr ( háttér:#003300; szélesség:300px; /*fix szélesség képpontban*/ margó:10px auto 0 auto; / *külső margók, a blokk középre igazítása és a tetejének behúzása 10 képponttal*/ ) div.centrall ( háttér:#990000; szélesség:30%; /*fix szélesség százalékokkal*/ margó:2% auto 0 auto; /*külső kitöltés, amely a blokkot középre igazítja és a tetejét 2%-kal behúzza*/ text-align:center; )

Középre igazítás a pozíció és balra használatával

Ez az opció nem minden elemhez alkalmas.

Először is, a szélességet csak százalékban kell megadni; ez képpontokkal nem működik. Hamarosan megérti, miért van ez így.

Másodszor, a szülőcímke pozíció tulajdonságának relatív/abszolút/fix értékre van állítva, a következők bármelyikével.

Most be kell állítania ezen értékek bármelyikét az igazított elem pozíciótulajdonságához. Ezután vegyünk 100-at, vonjuk ki ennek az elemnek a szélességét, és osszuk el a kapott számot 2-vel. A kapott érték az lesz, amelyet a bal oldalon meg kell adni (érdemes megjegyezni, hogy ez a tulajdonság helyettesíthető jobbra, mint általában ez nem elengedhetetlen). Ezeknek a tulajdonságoknak köszönhetően a kívánt div vagy táblázat a szülőelem közepére kerül.

Hogy működik ez? A pozíció tulajdonság itt azért szükséges, hogy a bal oldali tulajdonságot a képernyő szülőelemének bal szélétől számítsuk, bár néha megfelelő az a lehetőség, hogy a szülőnek nincs meghatározott pozíció tulajdonsága. Ezután egyszerűen beállítjuk a bal oldali tulajdonság értékét úgy, hogy a bal oldali szegély a szülőelem teljes szélességének felére kerüljön, mínusz a blokk szélessége.

Nézze meg saját szemével, hogyan működik.

HTML kód:

CSS kód:

body (pozíció:relatív;) div (padding:10px; color:#FFFFFF; position:relative;) div.centrall ( háttér:#990000; szélesség:20%; /*fix szélesség százalékon keresztül*/ text-align:center ; bal:40%; /*behúzás a szülőelem bal szélétől*/ )

NetSurf 2.6+, Hv3.

Igazítsa vízszintesen a képet középre a következővel: CSS használatával. Példa:

HTML/XHTML. Kód:

.példa(pozíció: relatív; bal: 0px; felső: 0px; magasság: automatikus; szélesség: 100%; lebegés: bal; kitöltés: 10px; szegély: 1px #ccc tömör; háttér: #fafafa;)

.példa img(kijelző: blokk; margó: 0 automatikus;)

CSS tulajdonságokés a tartályt (ebben az esetben példa) nagyon eltérő lehet, a középre igazítás a képhez közvetlenül kapcsolódó stílusok használatával jön létre: .példa img(kijelző: blokk; margó: 0 auto;).

És az Opera 4.0+-ban is, ha nem használnak gyorsított CSS-tulajdonságokat. Vagyis ha a CSS-kód az űrlapon van. példa img(kijelző: blokk; margó-bal: auto; margó-jobb: auto;).

Netscape 6.01+, Mozilla 0.6+ verziókban is.

Aliosque subditos et theme

1) Vízszintes és függőleges középre igazítás CSS használatával - 1 Igazítsa az oldal tartalmát a böngészőablak látható részének közepéhez CSS segítségével. A tároló, amelyben a weboldal teljes tartalma található, középen van igazítva - szélességben és magasságban. Többért modern böngészők: [További részletek] : [Példaoldal megnyitása] 2) Vízszintes és függőleges középre igazítás CSS használatával - 2 Az oldal tartalmának igazítása középre a böngészőablak látható területén CSS segítségével. A tároló, amelyben a weboldal teljes tartalma található, középen van igazítva - szélességben és magasságban. Konzervatívabb, mint az előző opció. Nem csak a modern böngészőkhöz, hanem a régebbiekhez is alkalmas. Mint például internet böngésző 6 ill korai változatai Maxthon. Ha változtatni kell valamit, az több erőfeszítést igényel, mint az első módszer: [További részletek]: [Példaoldal megnyitása] 3) Ismeretlen szélességű blokk vízszintes igazítása Ismeretlen szélességű blokk vízszintes igazítása CSS használatával: [ További részletek ] : [ Példaoldal megnyitása ] 4) Pozíció: abszolút középen Egy abszolút pozicionált elem vízszintes igazítása középre CSS használatával: [ További részletek ] 5) Kép: CSS központ Kép vízszintes középre igazítása CSS használatával: [ Tovább ] 6) Függőleges CSS-igazítás Szöveget és képeket tartalmazó blokkelem függőleges CSS-igazítása: [ Tovább ] 7) Középre igazítás JavaScript használatávalés CSS Igazítsa az oldal tartalmát a böngészőablak látható területén középre JavaScript és CSS használatával. A tároló, amelyben a weboldal teljes tartalma található, középre igazítva van – függőlegesen és vízszintesen: [ További részletek ]: Két eset: 1. A tároló középre igazodik, ha a képernyő felbontása 1024x768 vagy nagyobb: [ Példaoldal megnyitása ] 2 A tároló középre van állítva, ha a monitor képernyőjének felbontása 1024x768 vagy annál nagyobb, + az egérmutató az oldal tartalmi elemeinek egyikében lévő hivatkozás fölé viszi: [ Példaoldal megnyitása ]

MPlayer: Az FFmpeg Media lejátszók már régen megjelentek, de virágkoruk a videofájlok lejátszásához elég erős számítógépek tömeges terjesztésével kezdődött. Ez egybeesett a tömeges terjedéssel operációs rendszerés általában szoftver grafikus felülettel. A GUI-programok természetében azonban van egy kettősség: létezik egy kódkészlet, amely felelős a grafikus felhasználói felületért, pl. kinézetés van - arra, hogy a feladat, amelyre ez az alkalmazás egyáltalán létrejött. Mindkét komplexum rendszererőforrást fogyaszt, a felhasználói műveletekre adott válaszuk bizonyos várakozási időt hoz létre. Azokban az esetekben vagy koncepciókban pedig, ahol a megjelenést kevésbé tartják fontosnak - az elhagyásig vagy majdnem elhagyásig kevésbé fontosnak -, megjelennek többek között a konzolalkalmazások. Ezenkívül a grafikus felület és a motor szétválasztása megkönnyíti a grafikus felület megváltoztatását vagy az automatizált műveletek végrehajtását. Ezt a sémát a Windows médialejátszóival kapcsolatban is megvalósítják. Az MPlayer például szokásos formájában egy konzolalkalmazás, amely gyorsan indul, gyorsan reagál a felhasználói műveletekre, és szinte teljes egészében a rendszer erőforrásait használja fel azonnali feladatához. És ezen az alapon, ha szükséges, egy vagy másik grafikus felületet adunk hozzá egy új alkalmazás létrehozásához. MPlayer - / kezdőlap / Konzolos médialejátszó Windowshoz. Az SMPlayer és az UMPlayer alapja. Vannak Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, néhány más *nix rendszer, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS verziók. , Windows. Támogatott formátumok: videó, hang, statikus képek, feliratok stb. (Több teljes lista video és audio kodekek) MPlayer: "Dead Man" MPlayer: "Sky Captain and the World of Tomorrow" MPlayer: "10,000 BC" MPlayer: "13 Tzameti" MPlayer: "The Barhtsman's Contract" MPlayer: "The Marriage of Balzaminov" FFmpeg - / kezdőlap / Segédprogramok és könyvtárak készlete a videó és audio fájlokkal való munkavégzéshez.Linux alatt és Linuxra készült, de van lehetőség Windows-ra is. Lehetőség van más operációs rendszerre fordításra. Támogatott fájlformátumok és kodekek: (Lista Ezenkívül a VLC médialejátszó elindítható szöveges felülettel az ncurses használatával.

A HTML képek és szöveg közötti interakció jellemzői

Lássuk, hogyan helyezzük el szöveget a kép bal vagy jobb oldalán.

Az előző leckében a kimeneti módszert néztük meg HTML képek a .jpg kiterjesztéssel egy weboldalon, és hogyan állíthat be további helyet a közötte és a szöveg között. Folytassuk az ismerkedést a címkével és szövegelemekkel való interakciójának jellemzői.

Oldalnavigáció

Szöveg a kép tetején, alján, közepén

Szöveg a kép tetején Szöveg a kép közepén Szöveg a kép alján

Eredmény:

Tulajdonságok és értékek

• align="top" - igazodik kép és szöveg a teteje mentén.
• align="middle" - igazodik kép és szöveg középen, függőlegesen.
• align="bottom" – igazodik kép és szöveg az alja mentén.

Hadd emlékeztesselek arra, hogy három képformátum használható az interneten: PNG (.png), JPEG (.jpg) és GIF (.gif).

Ügyeljen a képbetöltés módjára: ../images/2121.png. Először is használt PNG formátum(.png). Másodszor, a kép egy külön mappában van, vagyis az egyik mappában van a dokumentum, a másikban a kép. Ilyen helyzetekben nagyon fontos, hogy helyesen jelezzük a dokumentumtól a betöltött képig vezető utat, ami meg is történt: az első két pont... határozza meg a kijáratot abból a mappából, ahol a dokumentum található (minden lecke, azok oldalak is, ezek egyben kurzusdokumentumok is HTML Ugyanabban a mappában vannak, CSS- egy másikban képek - egy harmadikban és így tovább); Az /images/ nem más, mint a képeket tartalmazó mappa neve, a 2121.png pedig magának a képnek a teljes fájlneve.

HTML kép balra - szöveg jobbra

Eredmény:

A kép a jobb oldali szöveg köré fonódik A kép a jobb oldali szöveg körül, a kép pedig a jobb oldalon található szöveg körül. A kép a jobb oldali szöveg köré fonódik. A kép a jobb oldali szöveg köré fonódik. A kép a jobb oldali szöveg köré fonódik. A kép a jobb oldali szöveg köré fonódik

Sandbox

hatóság 2013. október 11-én 17 óra 17 perckor

Képek központosítása egy oldalon

Bevezetés

Szeretek érdekes elrendezési problémákat megoldani, és az ezen a területen szerzett, kicsivel több mint 5 éves tapasztalataim alapján nem gyakran találkozunk ilyen problémákkal.
Nemrég több ilyen problémával találkoztam:

1. A kép középre állítása az oldal közepén és tömörítése a böngésző átméretezésekor.

Elvileg az első és a második feladat is megoldható kis javascripttel, de én ezt html+css segítségével okosan szerettem volna megcsinálni.
A feladatot az is megkönnyítette, hogy az oldal, amelyen ezt használnák, modernnek lett kifejlesztve, és a támogatás az ie9+-ra, FF-re, Chrome-ra, Safarira, Operára korlátozódott.

2. A kép abszolút középre igazítása, függetlenül a böngészőablak méretétől.

De ezen kénytelen voltam bütykölni. Az eredeti ötlet ez volt:

.wrapper( túlcsordulás: rejtett; pozíció: rögzített; felül: 0; jobbra: 0; lent: 0; balra: 0; ) .item( pozíció: abszolút; felső: 50%; bal: 50%; kijelző: inline-block ; ) .item img( margó: -50% 0 0 -50%; )

Az ötlet a következő logikán alapult:

• Külső blokk, .csomagolás, a teljes szabad szélességben és magasságban nyújtva.
• beltéri egység, .tétel, a benne lévő kép szélességét és magasságát veszi fel, mivel az inline-block; és a bal felső sarokkal a szülőblokk közepébe kerül.
• A kép mínusz margóra helyezése, amelynek pontosan középre kellett volna igazodnia .csomagolás

De egy teljesen logikus elképzelést megszakított egy még logikusabb függőség. Az 50%-os párnázást a szülő magasságának vagy szélességének fele alapján számítják ki. Esetemben a szülő szélessége és magassága a kép szélességére és magasságára épült, majd a kép -50%-os eltolása után a szülő, .tétel, ugyanilyen 50%-kal csökkent és a kör bezárult.

Ezt úgy döntöttem, hogy emlékeztem a transzformációra, pontosabban a fordítási funkciójára, amely mintha eltolná egy objektum megjelenítését, de elhagyja azt a helyet, ahol volt. És kiderült, hogy a kép margóját transzformációra cserélve: translate(-50%, -50%); a probléma azonnal megoldódik. És ez jött ki a végére:

*( padding: 0; margó: 0; függőleges igazítás: felül; ) html, body( szélesség: 100%; magasság: 100%; ) .wrapper( túlcsordulás: rejtett; pozíció: rögzített; felső: 0; jobbra: 0 ; alul: 0; balra: 0; ) .item( pozíció: abszolút; felül: 50%; bal: 50%; kijelző: inline-block; ) .item img( -webkit-transform: translate(-50%, - 50%); -moz-transzformáció: lefordítás (-50%, -50%); transzformáció: fordítás (-50%, -50%); )

PS: Nem vagyok benne biztos, hogy ezek az egyetlen lehetőségek vagy sem. Nem hiszem, hogy mindenki számára megfelelőek ezek a lehetőségek.
De azt biztosan tudom, hogy ha az én esetemben megfelelőek voltak, akkor lesznek olyanok, akiknek valószínűleg nagy segítségükre lesznek a feladataik elvégzésében. Ezen kívül ha egy kis kódot adsz a kódhoz, akkor régebbi IE-hez is adhatsz mankókat, én nem tettem hozzá, mert nem akartam elavult böngészők elrontani tiszta kódot.
PS2: Nagyon szívesen fogadjuk a kritikát és a tanácsokat. Köszönöm, hogy a végéig elolvastad.

Címkék: html, css, css3, kép, kép, kép, igazítás, függőleges igazítás

Ez a cikk nem kommentálható, mivel a szerzője még nem teljes jogú tagja a közösségnek. Csak akkor léphet kapcsolatba a szerzővel, ha meghívást kapott valakitől a közösségben. Eddig a pillanatig a felhasználónevét egy álnév rejti el.