Autor Zpráva
novacek90
Profil
ahoj,
mám takový problém s vertikálním centrováním obrázku jde o to, že používám jQuery a tomu jsem nastavil jednotnou výšku to funguje , ale problém přichází s tím, když vložím obrázek a chtěl bych ho mít zarovnanýá ve středu výšky. Zkoušel jsem již mnoho rad a ani jedna mi nepomohla, tudíž prosím o radu.

HTML
 <div id="tabs">
        <ul>
            <li><a href="#tabs1-1">Altán</a></li>
            <li><a href="#tabs2-1">Popis</a></li>
            <li><a href="#tabs3-1">Postup stavby</a></li>
        <li><a href="#tabs4-1">Ceník</a></li>
        <img src="/templates/img/titulni/altan2.jpg">
        </ul>
        <div id="tabs1-1">
        <img src="/templates/img/titulni/altan.JPG" class="titulni">
        </div>
        <div id="tabs2-1">
            <h2>Popis</h2>
          <p>...</p>          
        </div>
        <div id="tabs3-1">
            <h2>pod 2</h2>
        </div>
      <div id="tabs4-1">
        <h2>pod 3</h2>
        </div>
    </div>   

CSS
img.titulni {vertical-align: middle;}
.titulni {vertical-align: middle;}

ani jedno CSS nefunguje
asi to dělám celý špatně ale už nevím co zkoušet.

Předem díky za rady.
Milan
peta
Profil
#tabs1-1 {display:inline;display:inline-block;vertical-align:middle;line-height:200px;}
Nebo by mozna stacilo
li {vertical-align:middle;line-height:200px;}
Trejpa
Profil
novacek90:
asi to dělám celý špatně ale už nevím co zkoušet
Zkus sem dát odkaz na živou ukázku, tvůj kód samozřejmě funguje. Písmo, které sice okolo obrázku nemáš, by se vůči obrázku zarovnalo na jeho svislý střed.

Mimochodem tam máš chybu. Značka <ul> může obsahovat pouze značky <li>, první obrázek tedy patří do jedné z položek seznamu.


peta:
li {vertical-align:middle;line-height:200px;}
Vlastnost vertical-align lze uplatňovat pouze na řádkové bloky (například obrázky, které zarovnává vůči výšce řádku) a buňky tabulky (kterým srovnává jejich obsah).


novacek90:
Pakliže chceš zarovnat obrázek na svislý střed nadřazeného elementu (ten musí mít výšku) a ne obrázek vůči výšce řádku (k tomu totiž u obrázku slouží vertical-align), tak použij třeba to přetypování nadřazeného elementu, jak radí peta (výška obalujícího elementu je shodná s line-height, Internet Explorer je ve standardním režimu, v IE 6 a nižších to nefunguje, zbytečnosti jsem vyházel):
#tabs1-1 { display: inline-block; line-height: 200px; }
.titulni { vertical-align: middle; }
novacek90
Profil
tak jsem zkusil obě rady a ani jednu se mi nepodařilo rozchodit. Fungovalo to jen na textové elementy, ale ty na úvodu (1. položce "tabs1-1") nemám dávám sem i odkaz aby jste viděli názornou ukázku.
stonesystem.php5.cz

_________________________________________________________________________________________________________________
Trejpa:
Mimochodem tam máš chybu. Značka <ul> může obsahovat pouze značky <li>, první obrázek tedy patří do jedné z položek seznamu.

ano já vím a je to úmyslně a funguje to tak jak má i když to není zcela kódově přesné
_________________________________________________________________________________________________________________
Trejpa
Profil
novacek90:
Kdyby měl #tabs1-1 zadanou výšku, dalo by se svislé zarovnání obrázku vztáhnout k němu.

#tabs1-1 { display: inline-block; line-height: 31em; height: 31em; }
.titulni { vertical-align: middle; }

Výšku 31 em jsem přibližně odhadl z nadřazeného bloku, aby se do něj středící blok vešel.


Celé kódování stránky je podivné. Obalujícím blokům určuješ (mnohdy zbytečně) přesné rozměry, které vnořené bloky přesahují. Několikrát.
novacek90
Profil
Trejpa:
Celé kódování stránky je podivné. Obalujícím blokům určuješ (mnohdy zbytečně) přesné rozměry, které vnořené bloky přesahují. Několikrát.

Vůbec bych se nedivil a zatím je toto jen zkouška co dokážu udělat, i když narážím na spoustu chyb, které se snažím opravovat.


Ale moc ti díky za radu jelikož už mi to jde tak jak jsi mi to teď poslal
peta
Profil
novacek90: Uplna jistota vertical-align je u tabulek. Tam to funguje ve vsech prohlizecich. Takze, jestli to nutne potrebujes pro vsechny prohlizece stejne, tak tto uzavri do tabulky. Pak mam jeste dobre zkusenosti s P elementem a line-height.

Trejpa: li je podobny inline typu, takze by to v nem mohlo fungovat. Kdyby dal link na stranku, tak bych si zapl online editor css a videl bych, jestli to funguje. Ale nechtelo se mi vytvaret stranku, tak jsem to nezkousel.
Michael Gordon
Profil
Omlouvám se za můj vstup do diskuze, ale tento problém jsem také před několika lety řešil a vyřešil, ačkoli dost kostrbatě. Toto řešení jsem zvolil právě kvůli různorodé interpretaci prohlížeči. I když už toto dosti vybíhá z HTML a CSS a přechází do PHP, tak řešení je to účinné a funguje mi všude.

Dejme tomu, že mám miniatury fotek o max. výšce či šířce 80px a nebudu tu řešit thumbnails, to je do jiného tématu. Tímto uděláme z jakéhokoli obrázku plně centrovaný ve svém kontejneru.

          
        $imgsize = getimagesize($image);
          // pokud je šířka vyšší než výška tak vím, že šířka bude 80px a osu Y si dopočítám
          if ($imgsize[0] > $imgsize[1]) {
            if ($imgsize[0] > 80) {
              $newY = $imgsize[1] / ($imgsize[0] / 80); // výpočet poměrové výšky
            } else {
              $newY = $imgsize[1];
            }

            // následně si řekneme, že chceme, aby byl obrázek pevně 5px padding z každé strany
            // přepočítání paddingu probíhá jednoduchým výpočtem, kdy mám 80px větčí stranu - přepočítanou menší stranu
            // tím dostanu kolik chybí do 80px, přičtu 10px (2x 5px padding z každé strany a vydělím 2, 
            // čímž dostanu pevná čísla pro padding
            $padding = ((80 - $newY) + 10) / 2; 
            
            // toto přidám ke kontejneru obrázku (div) jako atribut style
            $addToStyle = "padding-top: ".$padding."px; padding-left: 5px;"; 
          } else { // pokud neplatí, tak je tu postup v otočení os X a Y
            if ($imgsize[1] > 80) {
              $newX = $imgsize[0] / ($imgsize[1] / 80);
            } else {
              $newX = $imgsize[0];
            }

            // následně si řekneme, že chceme, aby byl obrázek pevně 5px padding z každé strany
            // přepočítání paddingu probíhá jednoduchým výpočtem, kdy mám 80px větčí stranu - přepočítanou menší stranu
            // tím dostanu kolik chybí do 80px, přičtu 10px (2x 5px padding z každé strany a vydělím 2, 
            // čímž dostanu pevná čísla pro padding
            $padding = ((80 - $newX) + 10) / 2;

            // toto přidám ke kontejneru obrázku (div) jako atribut style
            $addToStyle = "padding-top: 5px; padding-left: ".$padding."px;"; 
          }

Tak doufám, že můj příklad někomu pomůže, jako kdysi pomohl mně.
peta
Profil
http://axpsu.fpf.slu.cz/~web/web-inspirace/
S nahledy je vzdy potiz, ze automatika je obvykle udela jinak, nez clovek potrebuje. Tady mam nektere veci resene podobnym scriptem. Potreboval jsem, ale, aby se vyuzila cela plocha nahledu. Ten temne modry nahled Los Colores je orezany uplne jinak, nez bych to orezal rucne. U Janina nahore jsem to uz delal rucne. A kdyz by stranka byla vlevo a ja mel screen z fullscreen a ono mi to centrovalo, tak mi to oreze pulku stranky a zbytek plochy je bily. Kdyz ma nekdo zhora 300px prazdne misto, tak pro vyuziti plochy je lepsi tech 300px proste neuvadet. Ale automatika to oreze tak, ze tam 300px bude, jen zmensenych.
Proto treba FB ma moznost pomoci JS urcit vyrez na fotce. Ale u prave popsaneho by mi ani to nestacilo :)
Michael Gordon
Profil
peta: Někde jsem viděl modul, který nejen, že podporuje výběr výřezu, ale i jeho poměr, což by mělo vyřešit Tvůj problém. Zkusím zapátrat po googlu a najít ho. Bylo to o tom, že když javascript nabídne možnost výřezu, tak byla i možnost výřez roztáhnout na větší část obrázku a tuto část obrázku zmenšil na jednotnou velikost.
novacek90
Profil
Děkuji za rady, ale už použité řešení mi funguje ve všech prohlížečích.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: