Jak vertikálně zarovnat tlačítka

HTML tag <div> umožňuje zarovnat formulářové prvky, jako jsou tlačítka, jak vertikálně, tak horizontálně. Tento kontejner formátuje obsah a pomáhá jej sladit s ostatními prvky na stránce. Pokud máte na stránce několik tlačítek, můžete je všechny umístit do jednoho <div>, aby se zarovnaly ve svislém směru. Úpravy provedete v libovolném textovém editoru, například v programu Poznámkový blok ve Windows.

Krok 1

V Průzkumníku najděte HTML soubor vaší webové stránky, klikněte na něj pravým tlačítkem a zvolte Otevřít v programu…. Vyberte Poznámkový blok.

Krok 2

V editoru najděte část kódu, kde jsou definována tlačítka. Obalte je následujícím kódem:

<div class="button-container">
    ... kód tlačítek ...
</div>

Krok 3

Přidejte CSS, které nastaví vertikální zarovnání tlačítek na střed:

.button-container {
    display: flex;
    flex-direction: column;   /* nebo row podle potřeby */
    justify-content: center;  /* vertikální střed */
    align-items: center;      /* horizontální střed */
}

Uložte soubor (Soubor → Uložit) a otevřete jej v prohlížeči, abyste ověřili, že se tlačítka zobrazují podle očekávání.

Potřebné nástroje

• Poznámkový blok (Windows) nebo jiný textový editor