Autor Zpráva
Lenka_H
Profil *
Hezky den,
chtela bych poprosit zdejsi profiky o pomoc.
Mam tabulku v html a chtela bych ji mit za vsech okolnosti vzdy uprostred stranky a to jak vertikalne tak i horizontalne.
Muzete mi prosim poradit?
Co se mi podarilo dohledat bylo jen horizontalni vycentrovani pomoci
table{margin:0 auto;}
Dekuji, Lenka
anonym_
Profil *
Lenka_H:
Tos hledala špatně :-)

Napr. perfektně okomentovany kód na Centering in CSS Grid.
Lenka_H
Profil *
Perfektně okomentovaný kód který nedělá to co má.


Perfektne okomentovany kod ktery ovsem nedela to co ma.
anonym_
Profil *
Lenka_H:
Je tam několik možností, a všechny jsou jednak popsané, druhak odkázané na zdroj. Včetně ukázek kódu.

A ano, přestože ta odpověď tam je hodně komplexní, pokus se jí projít, vč. souvisejících odkazů. Pokud to, co tam je popsáno, pochopíš, bude to pro tebe lepší, než když ti sem někdo vloží kód, který jen copypastneš.
Firibix
Profil
Reakce na Lenku_H:
Pozor na to, že všechny elementy nadřazené tomu, který chceš horizontálně vycentrovat, musí mít nastavenou výšku. Ve výchozím stavu má stránka výšku takovou, jak dlouhý je její obsah. Pak můžeš obsah centrovat jak chceš, ale když je stránka vysoká na pixel přesně jako obsah, vizuálně se nic dít nebude.

Nastav tedy výšku pro html, body a centrovací kontejner a poté použij například flexbox pro vycentrování:

html, body {
    height: 100%;
    margin: 0;
}

.centrovani {
    display: flex;
    min-height: 100%;
    align-items: center; /* vertikálně */
    justify-content: center; /* horizontálně */
}

<div class="centrovani">
    <span>vycentrováno</span>
</div>

Živá ukázka.
Bubák
Profil
CSS3 není třeba, stačí CSS.1
html, body {
    height: 100%;
    width: 100%;
    display: table;
}
body {
    display: table-cell;
    vertical-align: middle;
}
table {
    margin: auto;
}
V HTML je ta tabulka.
Živá ukázka

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:

0