Kam patří table-cell? Přeci do table!

Řekněme, že potřebujeme na webu udělat menu s proporcionálně širokými vycentrovanými položkami a přitom na plnou šířku stránky. Proč? Protože to tak "grafik" namaloval a klientovi se to líbí. Za skřípění zubů stvoříme jednořádkovou tabulku. Proč? Protože jistota je kulomet a zase tolik se v "přetypovávání" nevyžíváme.

V každé buňce bude odkaz A... aha, menu se bude rozbalovat. Takže v každé buňce bude obalovací DIV, ve kterém bude odkaz A a submenu. Submenu bude DIV či UL objevující se po najetí myší na obalovací DIV. Obalovací DIV tu je proto, aby měl nastaveno possition: relative, které TD mít nemůže, a mohlo se tedy vůči němu submenu absolutně pozicovat. Horizontální vycentrování zařídí text-align: center a display: block na odkazu. Vertikální vycentrování ošetříme nastavením line-height.

No jo, ale co když položek menu bude víc a některé (!) se budou zalamovat na více řádků? A přitom musí být text vycentrován vertikálně i horizontálně? Odkaz A "přetypujeme" display: table-cell a nastavíme mu pevnou výšku a vertial-align: middle a máme vycentrováno vertikálně. Problém ale budeme mít se šířkou - 100 % se z nadřazeného obalovacího DIVu nespočítá a pevná šířka je nežádoucí. Tady se dost často končí. Ale toto by prošlo při opravdu namačkaných položkách, ale jakmile menu bude vycházet tak nějak mezi, nebude to dobré.

Řešení ale není až tak obtížné: obalovací DIV "přetypujeme" display: table! Tím zafunguje 100% šířka odkazu A a přitom bude pořád fungovat pozicování submenu.