vertikalne zarovnanie textu

viktorcech · Napísal **viktorcech**: 30.12.2007 9:06

riesim taku zapeklitu situaciu, viem, ze riesenie by som aj tak nasiel, ale robim ten web uz mesiac a moc sa mi uz nechce, tak potrapim aj vas.. mam takuto situaciu.. chcem zarovnan urcity kus text na stred vertikalne s vedla susediacim obrazkom. bojim sa, ze konstrukcia je az velmi jednoducha, preto to nefunguje a mam pocit, ze by som to mal este nabalit jednym divom, aby to fungovalo, no neviem..

Kód:

<div class="box2">
  <img src="image.gif" alt=" " title=" " /><div>This symbol indicates you can tumble dry, but at a low heat setting</div></div>

Kód:

.box2 img {
 clear:both;
 float:left;
 padding: 10px;
 border: 1px dotted #ccc;}

.box2 {
 border: 1px dotted #ccc;
 width: 900px;
 margin: 20px 25px;
 padding: 15px;}

.box2 div {
 float:left;
 margin: 0;
 width: 780px;
 border: 1px solid #f2f2f2;
 display: table-cell;
 vertical-align: middle;
 position: static;}

ten div bez nazvu netreba riesit, je to len provizorne. urobil som z neho tabulkovy element, aby fungovalo zarovnanie vertical-align, no nefunguje.

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 9:23

pridal som este display: table divu box2 a cele sa to zacalo podobat na tabulku, no problem to neriesi.

m@-nX · Napísal **m@-nX**: 30.12.2007 12:41

Neviem ci som to pochopil spravne...Nieco taketo?

odkaz

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 12:48

m@-nX píše:

Neviem ci som to pochopil spravne...Nieco taketo?

odkaz

ou je.. presne tak.

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 12:49

problem je v tom, ze ten text ma mat este nejake formatovanie, border a tak.. ked ho obalim do divu, asi to nebude frcat, no idem skusit.

ps. pekna cica;)
pss.. ten moj priklad je rieseny inak, ja viem ako funguje vertical-align, ale nejde to..

m@-nX · Napísal **m@-nX**: 30.12.2007 12:57

a ten img bude mat vzdy pevnu vysku?

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 12:58

m@-nX píše:

a ten img bude mat vzdy pevnu vysku?

ano, vsetko je tam napevno.

m@-nX · Napísal **m@-nX**: 30.12.2007 13:34

toto

alebo toto?

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 13:38

m@-nX píše:

toto

alebo toto?

ako sa zachova TOTO, ked box2 floatnes nalavo? bo nenatahuje sa celkovo.. ale vypada to dobre, skusim pouzit. preco si pouzil display: block?

m@-nX · Napísal **m@-nX**: 30.12.2007 13:43

toto floatnute nalavo sa zachova takto
musel som rozsirit body koli sirke obrazka

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 13:43

mne to nefunguje..

dal som to na web, skus..
http://www.podstromami.com/test2/_size_guide.html

jedna sa o tie symboly na pranie:)

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 14:01

ale ked sa nad tym zamyslim logicky.. pokusam sa zmenit urcity blok na tabulkovy blok, cize ma napada, ze by som na to mal asi pouzit tabulku, ved v podstate ide o nejake informacie, ktore sa na tabulku podobaju..

m@-nX · Napísal **m@-nX**: 30.12.2007 14:22

viktorcech píše:

mne to nefunguje..

dal som to na web, skus..
http://www.podstromami.com/test2/_size_guide.html

jedna sa o tie symboly na pranie:)

tomu divu s textom si nedal margin-top s hodnotou priblizne polovice sirky obrazka...mno trosku menej, v tomto pripade o vela menej kedze mas malicky obrazok

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 14:34

m@-nX píše:

tomu divu s textom si nedal margin-top s hodnotou priblizne polovice sirky obrazka...mno trosku menej, v tomto pripade o vela menej kedze mas malicky obrazok

to problem neriesi, skor ho komplikuje. vyskusaj a uvidis.

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 14:38

ja to asi urobim cez tabulku, len neviem co na to sef :roll:

m@-nX · Napísal **m@-nX**: 30.12.2007 14:39

skusil som, vysledok:

http://knoweurope.eu/www/1234/skuska.html

v tvojom pripade to komplikuje asi len to ze ked mas text vedla obrazke na viac ako 1 riadok tak uz to nieje "az tak v strede"

viktorcech · Napísal autor témy **viktorcech**: 30.12.2007 14:42

m@-nX píše:

skusil som, vysledok:

http://knoweurope.eu/www/1234/skuska.html

v tvojom pripade to komplikuje asi len to ze ked mas text vedla obrazke na viac ako 1 riadok tak uz to nieje "az tak v strede"

border obrazka a textu musi byt zarovno, urobim to ako table..

m@-nX · Napísal **m@-nX**: 30.12.2007 15:06

v tom pripade padding top a bottom a tym si dostelujes div s textom na taku vysku aku ma img...

ale sak rob ako chces ty

p360t · Napísal **p360t**: 30.12.2007 16:45

viktorcech píše:

ja to asi urobim cez tabulku, len neviem co na to sef :roll:

Nemal by to byť skôr definičný zoznam? (inak z praktického hľadiska by som to okamžite spravil tabuľkou, určite je to vhodnejšie ako tie smiešne divy).

mondzo · Napísal **mondzo**: 03.01.2008 13:46

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

dufam, ze pomoze, neskusal som, ale podla toho co som cital by to mohlo vyriesit Tvoj problem...

vkmt · Napísal **vkmt**: 03.01.2008 15:12

uz som to vyriesil tabulkou.

vertikalne zarovnanie textu

Podobné témy