ugrás a tartalomhoz

Fix méretű div és a vertical-align: middle

Anonymous · 2006. Jan. 18. (Sze), 13.47
Tehát van egy szélét/hosszát tekintve fix méretű div, amibe thumbnailek jönnek. A div pozícióját és a thumbok méretét előre kiszámítani nem lehet (illetve csak több munkával, mint amennyit érne ez az egész). Hogyan lehetne a div közepére (vertikálisan) terelni a benne lévő thumbokat? A topic címében szereplő tulajdonságnak (vertical-align: middle;) nincs hatása.
‹ Ne a gyorsitótárból töltse be a *.php fájlt, hogyan? háttérkép automatikus méretezése ›
 ■
1

CSS tévhitek 1.

Jano · 2006. Jan. 18. (Sze), 14.07
Lassan ebből már cikket fogok írni... A vertical-align csak inline elemekre és táblázat cellákra van hatással, blokk elemekre, illetve a bennük lévő elemekre nem!

Ha egy diven belül egymés mellé raksz pár képet az img tag használatával és ezután az img elemeknek (nem a befoglaló elemnek!!) megadod a vertical-align:middle szabályt, akkor azok egymáshoz képest függölegesen középre lesznek igazitva. Ha a képek több sorba tördelődnek, akkor ez az igazítás soronként fog megtörténni.

A vertical-align nem fog egy blokk tipusú elemet (pl DIV, P), középre igazítani egy másik blokk típusú elemen belül.
2

Kép a divben

Anonymous · 2006. Jan. 18. (Sze), 14.37
És mi van akkor, ha csak egy kép kerül a divbe? Hiába adom a vertical-align: middle tulajdonságot a képnek, nincs hatása.
3

Az ok és a megoldás

Jano · 2006. Jan. 18. (Sze), 15.08
Mint mondtam az adott tulajdonság csak inline vagyis "sorbeli" elemekre vonatkozik. Az egyetlen kép egy úgynevezett "anonymous inline" sort generál maga köré és abban kerül elhelyezésre. Ennek a sornak a magassága nem feltétlenül egyezik meg az őt befoglaló blokk tipusú elem magasságával. Ez olyan mintha lenne egy sima A4-es lapod és húznál rajta vonalakat amíkre írni szeretnél. Hogy milyen távol vannak egymástól a vonalak azt a sormagassággal lehet beállítani (line-height). Innen gondolom már megvan a megoldás: Az egyetlen képnek egyetlen sor kell, legyen ez a sor ugyanolyan magas mint a befoglaló blokk tipusú elem.
4

Azaz?

Anonymous · 2006. Jan. 18. (Sze), 16.03
Leírtad ezeket a dolgokat, mintha tök hülye lennék hozzá (az vagyok, szal jogos a kioktatás), de akkor mégis miből gondoltad, hogy majd két szóból (line-height) már egyből tudni fogom, mi a megoldás? Köszönöm a segítséget és a CSS leckéket, tényleg, de az, hogy valamit elméletben tud az ember, koránt sem biztos, hogy a gyakorlatba is át tudja ültetni - mint most én...
5

Nem kioktatasnak

Jano · 2006. Jan. 18. (Sze), 16.26
Bocs, nem kioktatasnak szantam...
6

NP

Anonymous · 2006. Jan. 18. (Sze), 16.52
Nem probléma. Azért köszönöm...
7

a legjobb segítség

Táskai Zsolt · 2006. Jan. 18. (Sze), 17.15
szerintem meg a fenti kettő (1 és 3) az utóbbi idők legsegítőbb fórumhozzászólásai. mert nem csak azt mondja, hogy "line-height: npx", hanem a lényeget. így segít a kezdőnek is, aki ezáltal hatékonyabb haladó lehet, és a haladónak is, mert olyan összefogottan olvashat a szűkebb témáról, hogy még jobban megvilágosodhat, elmélyülhet.
köszönjük.
Tasi
8

<Nincs cím>

Anonymous · 2006. Jan. 18. (Sze), 17.27
Ezt nem vitatom, sőt, ha figyeltél, szépen meg is köszöntem a leckéket. Csak hát sajnos vagyok olyan hülye és kezdő, hogy ez nekem nem segített.
12

Egy újabb megvilágítás

cubase · 2011. Dec. 31. (Szo), 19.21
Való igaz, hogy az 1-3 hozzászólás egy magasabb szintű magyarázat, vagyis többször át kell rágja magát az ember, hogy megértse mit akar a hozzászóló mondani. Vagy csak egyszerűen arról van szó, hogy a kérdező belebonyolódott a saját nézőpontjába, és képtelen elvonatkoztatni a szemléletétől.

Amit én értettem meg: Mivel a vertical-align tulajdonság csak a soron belüli elemekre érvényes, tehát az olyan elemekre, amelyek jellemzően egy sorban helyezkednek el: <p><span> stb. Ezeket az őket befoglaló elem közepére helyezi. És talán ez maradt ki az előző hozzászólásokból: az általad igazítani kívánt elem a sor. Nem a div. A div-ben van egy nem látható "elem", ez a sor. És a sornak a közepére is illeszti. De milyen magas a sor? Megadtad neki a magasságág? Vagy csak a div magasságát adtad meg? Igen, csak a div magasságát adtad meg, a div-ben lévő sor "elem" magasságát nem adtad meg. Annak a magasságát pedig a line-height tulajdonsággal tudod megadni. Tehát ha a div-en belül lévő "elem", a sor magasságát megadod, akkor már képes lesz középre (a sor közepére) igazítani a képet.

Ha nem adod meg a sor magasságát (line-height), akkor a sorod magassága meg fog egyezni a kép magasságával. És a képed a sor közepén fog elhelyezkedni, de a sorod nem fog az őt befoglaló div közepén elhelyezkedni. Viszont ha a sor magassága megegyezik a div magasságával, akkor már egyből úgy tűnik, hogy a div közepére igazítja a képet.

Ui.: Nem vagyok szakember, a hozzászólásokból és az eddigi tapasztalatomból merítettem az itt leírtakat, nem szakkönyvből olvastam.
14

Mennyire új?

Pepita · 2012. Jan. 2. (H), 21.34
Észrevetted, hogy ez egy hatéves téma? Azóta már cikkek is jelentek meg a témában...
15

Segítség

Kynee · 2012. Már. 5. (H), 20.32
Lehet hogy 6 éves téma, és lehet hogy cikkek is jelentek meg, de nekem (szerencsétlenkedő kezdőnek) megoldotta a problémám. :)
9

margin

Anonymous · 2006. Jan. 27. (P), 12.38
Esetleg megoldás lehet ha a képeket egy másik div -be is beleteszed, és annak az elemnek nem adsz meg magaságot, csak szélsséget. Annak a div -nek (pl.: imgcont) a text-align -ja center, ezért középen lesznek egy sorban a képek. A margin (left, top, bottom, right) auto -ra állításával pedig minden irányban középre teszi az imgcont -ot. FF alatt biztosan működik. IE -ben már nem vagyok biztos.
10

Ehhez mit szóltok?

csukaj · 2008. Feb. 9. (Szo), 01.31

<div style="width:300px; height:200px; border: solid 1px #000;">
  <div style="width:300px; line-height:200px; margin:0px; padding:0px;">
    Sample Text
  </div>
</div>
Széséghibája, hogy túl hosszó szöveg esetén a 2. sor már kicsúszik a div-ből, de 1 sor esetén működik ff-ben és ie-ben.
11

Zseniális megoldás, és milyen

Fraki · 2009. Jún. 14. (V), 13.21
Zseniális megoldás, és milyen eredeti...
13

Esetleg így?

szasza81 · 2012. Jan. 2. (H), 00.51
<div style="width: 300px; height: 300px; border: solid 1px red; vertical-align: middle; display: table-cell;">
<p>aa</p>
</div>