IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:19.4.2018 19:05

Ahoj,
po dlouhé době jsem se řádně zasekl.
Přál bych si posadit tabulku jako takovou celou doprostřed stránky (50% top, 50% left...). S horizontálem není problém, vertikálně je to horší.
Zkouším position: absolute, obalování do různých divů, různé rady via Google, ale prostě nevím.
Struktura je cca taková (odmazal jsem PHP skripty):

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </table>
    </body>
</html>

Tipy? Děkuji.

Odpovědět
19.4.2018 19:05
RD
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Roman Duchoň
Jan Lupčík:19.4.2018 19:24

Ahoj, tabulku obal do divu třeba s třídou wrapper-table. Následně ten div nastyluj:

.wrapper-table {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
}

Výše jsem použil flexbox. Více o něm si můžeš přečíst v následujícím článku:
https://www.itnetwork.cz/…nich-layoutu

Nahoru Odpovědět
19.4.2018 19:24
TruckersMP vývojář
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:19.4.2018 19:27

No, já už na to taky nějak přišel.
Chybělo mi v CSS

html {
    height: 100%;
}

V body jsem ho měl, ale prostě to dělalo bordel.
Takže... obalení do div a pak v CSS:

body {
    height: 100%;
    width: 100%;
    margin: auto;
    text-align: center;
    position: relative;
}
div {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%) translateY(50%);
}

No, ale schválení se taky třeba šikne...

Editováno 19.4.2018 19:30
Akceptované řešení
+5 Zkušeností
Řešení problému
Nahoru Odpovědět
19.4.2018 19:27
RD
Avatar
Roman Duchoň
Člen
Avatar
Odpovídá na Jan Lupčík
Roman Duchoň:19.4.2018 19:28

Ach jo, zas ten flex-box. Píšu si ho do diáře. :-)

Nahoru Odpovědět
19.4.2018 19:28
RD
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Roman Duchoň
Jan Lupčík:19.4.2018 19:30

To, co jsi použil, jsou celkem hacky. Osobně ti doporučuji ten flexbox. Vždy se ti bude hodit, stojí za to se ho naučit. :)

Nahoru Odpovědět
19.4.2018 19:30
TruckersMP vývojář
Avatar
Roman Duchoň
Člen
Avatar
Odpovídá na Jan Lupčík
Roman Duchoň:19.4.2018 19:32

No, mně to právě přijde tak zvláštně logické. :-)
Ale jo, nejsi první, kdo na mě s flexboxem a už jsem ho i zkoušel, ale pořád se v něm tak nějak patlám.
Takže jsem teď přesvědčen o tom, že se prostě musím kousnout a naučit se ho...

Nahoru Odpovědět
19.4.2018 19:32
RD
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:19.4.2018 19:35

Hele, kliknul jsem nechtěně na svůj příspěvěk, nebudu mít průser?
Já žádnou odměnu nechci nebo co to tu napsalo! :D To ať jí má radši IT Man, když se snažil mi pomoct. :-) Jak správně - to posoudit nemohu, když neumím flexbox.

EDIT: Tak jsem to odzkoušel, aniž bych porozuměl a funguje to stejně dobře! :)
Jak změním akceptovatelné řešení?

Editováno 19.4.2018 19:38
Nahoru Odpovědět
19.4.2018 19:35
RD
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Roman Duchoň
Jan Lupčík:19.4.2018 19:57

Řešení můžeš snad stornovat, já jsem už dlouho nezakládal příspěvek. Pokud nemůžeš, tak Moderátoři můžou. :)
Jinak flexbox je fakt suprová věc, mrkni se na něj. Dost ti ulehčí život. :)

Nahoru Odpovědět
19.4.2018 19:57
TruckersMP vývojář
Avatar
Roman Duchoň
Člen
Avatar
Odpovídá na Jan Lupčík
Roman Duchoň:19.4.2018 20:20

Asi ne...

Jo, mrknu určitě i na ten článěk od Tebe. ;)
Musím tady ale nejdřív odstranit nějaký to-do lístečky.
Každopádně - děkuji. :)

Nahoru Odpovědět
19.4.2018 20:20
RD
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na Roman Duchoň
Jan Lupčík:19.4.2018 21:57

V pohodě, ať se daří. ;)
Pokud budeš mít nějaký další problémy, tak klidně zase napiš na fórum. :P

Nahoru Odpovědět
19.4.2018 21:57
TruckersMP vývojář
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.