Autor Zpráva
bob99
Profil
Zdravím,
mám tento kód a potřeboval bych zarovnat text na střed vertikálně se zachováním výšky klikatelného odkazu s výškou divu.

<style type="text/css">
     a:hover {
          background: #ccc;     
     }
</style>

<div style="border: 1px solid green; display: table; height: 200px; #position: relative; overflow: hidden;">
     <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
        <div style="border: 1px solid red; #position: relative; #top: -50%; ">
            <a style="HEIGHT: 100px; DISPLAY: block;" href="">
              everything is vertically centered
            </a>  
        </div>
    </div>
</div>

Díky za pomoc
undefined
Profil *
bob99:
Vertikální zarovnání se dá použít jen v několika málo případech. Pokud je výška parent prvku dynamická, je třeba to řešit jinak, například pomocí javascriptu.

Pokud je výška statická, tak horní okraj bude (VýškaParent - VýškaPrvek) / 2.


Ještě by šlo teoreticky využít návodu Juhůa, snad to bude to, co přesně potřebujete.
bob99
Profil
Z toho návodu od Juhůa jsem čerpal a ten zdroják jsem si zkoušel upravit, ale bez úspěchu.
Takže zbývá jen javasript? Měl by někdo řešení v javascriptu? Ten bohužel neovládám :-(
hugo123
Profil *
Mam presne rovnaky problem, asi bude treba JS a ten ani ja neviem ;-(((
Ak by sa tu nasla nejaky velmi dobra dusa, boli sme obaja velmi vdacni.
Keeehi
Profil
Tak tady máte ten návod ještě jednou a v češtině. Nic složitého to není a nemusíte se spoléhat na podporu javasciptu. Vertikální centrování v CSS
Chamurappi
Profil
Reaguji na Keeehiho:
Nefunguje v Exploreru sedmičce.


Reaguji na boba99:
Takže zbývá jen javasript? Měl by někdo řešení v javascriptu?
Proč JavaScript? Když už by to nešlo vyřešit čistě, použil bych stokrát raději tabulku než JavaScript…
Plaváček
Profil
bob99:

Použij klidně tabulku, třeba takto http://klient.plavacek.net/tabulka-obrazek.html
bob99
Profil
[#7] Plaváček

Tak tohle to je přesně ono co jsem hledal.

DÍKY !
bob99
Profil
Tak jsem opět zde. Ten kód od Plavačka funguje skvěle ne Firefoxu, ale v IE 8 ne. U mě se to chová stejně jako v na uvedené stránce v režimu "kompatibilní zařízení...
Plaváček
Profil
bob99:

Mně to v IE 8 funguje. IE musíš mít ve standardním režimu (to znamená použít správné DOCTYPE).
bob99
Profil
Zkoušel jsem tyto 4 se stejným výsledkem:
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Plaváček
Profil
bob99:

Mnou uvedený odkaz ti v IE 8 korekntě nefunguje?
bob99
Profil
To jo, ale zobrazí se nabídka "zobrazit v kompatibilním režimu" a pokud je režim zaplý tak se to chová jako u mě na serveru tak nevím kde by mohla být chyba...

http://www.tipypropc.cz/internet-explorer-8-a-kompatibilita/
Moderátor Chamurappi: Vkládej klikatelné odkazy.
Plaváček
Profil
bob99:

Tak si kompatibilní tlačítko vypni:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Pozor, toto musí být umístěno v kódu jako úplně první meta tag, jinak nebude fungovat.
bob99
Profil
Díky už to funguje OK i ve firefoxu s IE pluginem :-)

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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