| Autor | Zpráva | ||
|---|---|---|---|
| wdiver Profil * |
#1 · Zasláno: 22. 6. 2010, 01:16:10
Mám nějakou tabulku a potřeboval bych ji v xhtml zarovnat na střed. Znám 2 způsoby jak to udělat: pomocí "margin: 0 auto", které funguje jen u blokových elementů, které musí mít nastavené nějaké width nebo to lze udělat pomocí pozicování a potom odčítání souřadnic ve vnořených blocích a na to je zase potřeba znát šířku elementu(zde tabulky) který chci vycentrovat. Text-align který znát width nepotřebuje na tabulku nefunguje. Jakým jiným způsobem mohu ještě zarovnat tabulku na střed stránky aniž bych musel znát a definovat její šiřku?
|
||
| Keeehi Profil |
#2 · Zasláno: 22. 6. 2010, 02:05:28
wdiver:
Fungje toto: body {text-align:center;}
table {margin: 0 auto; text-align:left;} |
||
| Bubák Profil |
#3 · Zasláno: 22. 6. 2010, 02:25:14 · Upravil/a: Bubák
wdiver:
„"margin: 0 auto", které funguje jen u blokových elementů, které musí mít nastavené nějaké width“ Funguje i u obrázků bez nastavené šířky, pokud jsou deklarovány jako blokové, protože obrázky mají svou výchozí velikost. Podobně tabulky mají svou výchozí šířku, která je jejich obsahem. Znám tři způsoby, jak to udělat: <style>
table {border: 2px solid gray; margin-top: 1em; border-collapse: collapse;}
th, td {border: 1px solid silver;}
.center {margin: 1em auto;}
</style>
<center>
<table>
<tr><th>kanál<th>f (MHz)
<tr><td>1<td>446,00625
<tr><td>2<td>446,01875
<tr><td>3<td>446,03125
<tr><td>4<td>446,04375
<tr><td>5<td>446,05625
<tr><td>6<td>446,06875
<tr><td>7<td>446,08125
<tr><td>8<td>446,09375
</table>
</center>
<table align="center">
<tr><th>kanál<th>f (MHz)
<tr><td>1<td>446,00625
<tr><td>2<td>446,01875
<tr><td>3<td>446,03125
<tr><td>4<td>446,04375
<tr><td>5<td>446,05625
<tr><td>6<td>446,06875
<tr><td>7<td>446,08125
<tr><td>8<td>446,09375
</table>
<table class="center">
<tr><th>kanál<th>f (MHz)
<tr><td>1<td>446,00625
<tr><td>2<td>446,01875
<tr><td>3<td>446,03125
<tr><td>4<td>446,04375
<tr><td>5<td>446,05625
<tr><td>6<td>446,06875
<tr><td>7<td>446,08125
<tr><td>8<td>446,09375
</table>Dodatek: Keeehi: „Fungje toto:“ Máš pravdu, jde ti tak. |
||
| Keeehi Profil |
#4 · Zasláno: 22. 6. 2010, 07:36:17
3) Bubákovo řešení zapomíná na IE.
|
||
| Bubák Profil |
#5 · Zasláno: 22. 6. 2010, 09:02:46
Keeehi:
„3) Bubákovo řešení zapomíná na IE.“ Třetí řešení úmyslně zapomíná na IE, která jsou starší, než IE 6. |
||
| wdiver Profil * |
#6 · Zasláno: 22. 6. 2010, 09:12:09
Keeehi:
super, tohle funguje všude, děkuju. Pokud to správně chápu, tak margin auto prohlížeč správně dopočítá díky tomu že buď ví, že daný prvek má být v prostředku nebo pokud je to blokový typ s pevně nastavenou šířkou že? Mimochodem, kdybych chtěl takto zarovnat tabulku i na výšku, jak by se to udělalo? |
||
| panther Profil |
#7 · Zasláno: 22. 6. 2010, 10:08:24
wdiver:
„Mimochodem, kdybych chtěl takto zarovnat tabulku i na výšku, jak by se to udělalo?“ hledej vertikální centrování. |
||
| wdiver Profil * |
#8 · Zasláno: 23. 6. 2010, 00:08:40
Všechny návody co jsem našel se spoléhají na pevně danou výšku(ať už samotného elementu který centruji nebo nějakého obalového). Pokud bych chtěl centrovat pomocí pozicování, musím znát výšku pozicovaného blokového elementu, pokud bych to chtěl dělat takhle: www.jakpsatweb.cz/css/css-vertikalni-centrovani.html, tak zase musím znát výšku toho prvního obalového divu. Jenže já výšku nemůžu uvádět, protože ji nebudu znát.
|
||
| wdiver Profil * |
#9 · Zasláno: 23. 6. 2010, 00:12:33
Tak to funguje, podle odkazovaného návodu jsem zapomněl dopsat definovat styl html(měl jsem jen body). Přiznám se, ale že mi to připadá takové nehezky provedené. Mám zaručeno že to bude fungovat ve všech prohlížečích(alespoň nějakou normou)?
|
||
| Keeehi Profil |
#10 · Zasláno: 23. 6. 2010, 00:29:58
wdiver:
Nikdo ti nic zaručit nemůže, ale jak bylo na té stránce napsáno, mělo by to fungovat v Internet Exploreru 5.0, 5.5 i 6.0, v prohlížečích s jádrem Gecko všech verzí (Mozilla, Firefox, Netscape 7), v Opeře 7 a v Safari. Rozhodně bych tomu ale věřil. „připadá takové nehezky provedené“ Máš-li lepší nápad, udělej si to lépe. |
||
| Chamurappi Profil |
#11 · Zasláno: 23. 6. 2010, 01:36:48
Reaguji na wdivera:
Viz Vertikální centrování v IE 7. |
||
|
Časová prodleva: 14 let
|
|||
0