Vycentrovat tlačítko na webové stránce nemusí být tak jednoduchá úloha, zejména pro začátečníky. Existuje však jeden jednoduchý způsob, jak to udělat, bez použití složitých stylů CSS nebo JavaScriptu.
K vycentrování tlačítka stačí použít značku HTML . Tato značka pomůže zarovnat prvek do středu stránky a učinit jej atraktivnějším pro návštěvníka.
Příklad použití této značky:
Tlačítko bude nyní umístěno uprostřed stránky bez ohledu na velikost okna prohlížeče nebo zařízení, které zobrazuje webovou stránku.
Je důležité poznamenat, že použití značky je považováno za zastaralý způsob, jak vycentrovat prvky, a proto se nedoporučuje pro použití v moderním webovém designu. Místo toho se vyplatí použít styly CSS k vycentrování prvků, aby byl zajištěn flexibilnější a kontrolovanější design.
Umístění tlačítka uprostřed stránky v HTML
Pro začátek vytvoříme tabulku složenou z jednoho řádku a jedné buňky:
Poté umístíme tlačítko uvnitř buňky:
Pomocí CSS nastavíme styly tabulky a buňky, aby bylo dosaženo potřebné centrace. Pro tabulku nastavíme šířku 100% a výšku 100%:
Nyní umístíme buňku tabulky do středu stránky pomocí zarovnání:
Tímto způsobem jsme umístili tlačítko do středu stránky pomocí tabulky. Tato metoda je poměrně jednoduchá a vhodná pro umístění jednoho prvku. Pokud potřebujete umístit více tlačítek, můžete použít další buňky tabulky nebo jiné metody vycentrování, jako je flexbox nebo grid.
Metody Centrování tlačítka na webové stránce
Existuje několik metod pro vycentrování tlačítka na webové stránce. Zvažte některé z nich:
| Metoda | Popis |
|---|---|
| Použití CSS | Pomocí vlastnosti text-align: center lze tlačítko vycentrovat uvnitř kontejneru. K tomu je třeba nastavit kontejneru styl text-align: center a samotné tlačítko - display:inline-block. |
| Použití tabulky | V tabulce je možné umístit tlačítko uvnitř buňky, bude automaticky vycentrováno. Chcete-li to provést, můžete vytvořit tabulku s jedním řádkem a jednou buňkou, do které umístíte tlačítko. |
| Použití Flexboxu | Pomocí vlastností flex a justify-content:centrum může vytvořit kontejner, který automaticky centruje obsah vodorovně. K tomu je třeba nastavit kontejneru styl display: flex a samotné tlačítko - margin:auto. |
Volba metody vycentrování tlačítka na webové stránce závisí na požadavcích projektu a preferencích vývojáře. Každá z uvedených metod má své výhody a nevýhody, proto je důležité je aplikovat s ohledem na kontext a cíle projektu.
Použití CSS k vycentrování tlačítka
Pokud chcete tlačítko vycentrovat na webové stránce, můžete k dosažení požadovaného výsledku použít CSS. Zde je několik příkladů, jak to udělat:
1. Použití vlastnosti text-align s hodnotou center v nadřazené položce:
2. Použití vlastnosti margin s automatickou hodnotou a blokovým zobrazením položky:
3. Použití vlastnosti flex s hodnotou center v nadřazené položce:
Všechny tyto způsoby vám umožní vycentrovat tlačítko na webové stránce, vyberte si to, co nejlépe vyhovuje vašim potřebám a stylu předchozích prvků.
Vytvoření horizontálního středu předchozího příkladu
Chcete-li vytvořit horizontální vycentrování tlačítka v předchozím příkladu, můžeme použít flexbox. Nejprve musíme kontejneru zadat vlastnost "display: flex" a "justify-content: center". Tímto způsobem bude tlačítko vycentrováno na ose X (vodorovně).
Zde je příklad kódu:
.container
Aplikujte tuto třídu na nádobu tlačítka a tlačítko bude vodorovně vycentrováno na stránce.
Použití relativního umístění pro vytvoření centra na stránce
Chcete-li vycentrovat tlačítko na stránce, můžete použít relativní umístění. Chcete-li to provést, musíte zadat vlastnost position s hodnotou relative položce Obsahující tlačítko.
Výhodou relativního polohování je, že zachovává prostor obsazený prvkem, aniž by překrýval další prvky na stránce.
Chcete-li tlačítko vycentrovat, musíte mu nastavit příslušné vlastnosti. Například:
.buttonV tomto příkladu je nastaveno relativní umístění nastavením vlastnosti position s hodnotou relative. Poté pomocí vlastností left a transform se tlačítko posune doleva o 50% šířky nadřazeného prvku a poté se posune zpět o polovinu své šířky.
Tlačítko tak bude umístěno přesně uprostřed stránky, bez ohledu na její velikost a velikost rodičovského prvku.
Použití tabulky pro umístění tlačítka uprostřed
V tomto příkladu bude na celou obrazovku umístěna tabulka a uvnitř ní buňka, ve které bude tlačítko umístěno. Pomocí atributů align="center" a valign="middle" buňka bude zarovnána ve středu vodorovně a svisle.
Styly můžete také použít na tabulku a tlačítko pro změnu jejich vzhledu podle vašich potřeb.