Odkaz lze vycentrovat dvěma způsoby:
- Vycentrujte odkazy v CSS pomocí „ zarovnání textu ' vlastnictví
- Vycentrujte odkazy v CSS pomocí „ okraj ' vlastnictví
V tomto článku vysvětlíme oba způsoby, jak vycentrovat odkaz. Takže, začněme!
Metoda 1: Odkazy na střed v CSS pomocí vlastnosti zarovnání textu
K vystředění odkazů v HTML použijeme „ zarovnání textu ” vlastnost CSS. ' zarovnání textu ” vlastnost v CSS se používá k úpravě zarovnání textu, jako je zarovnání vlevo, vpravo, na střed a zarovnání do bloku.
Syntax
Syntaxe vlastnosti text-align je:
zarovnání textu : hodnota
Na místě „ hodnota “, můžete nastavit zarovnání textu, například doleva, doprava, na střed a zarovnání.
Nyní použijeme „ zarovnání textu ” pro zarovnání daných odkazů na střed.
Příklad
Chcete-li vycentrovat odkaz na webové stránce, přidáme odkaz v HTML do značky
. Chcete-li to provést, použijte značku k definování hypertextového odkazu a zadání požadované adresy webu. Poté zadejte název odkazu. V našem případě jsme přidali odkaz na naši webovou stránku Linuxhint.HTML
< tělo >< A href = “https://linuxhint.com/” > Linux < / A >
< / tělo >
Níže uvedený obrázek ukazuje, že byl přidán odkaz, který je ve výchozím nastavení umístěn na levé straně:
Nyní přejděte do CSS a vycentrujte odkaz.
Zde použijeme „ A ” pro přístup k přidanému odkazu. Poté nastavte hodnotu zarovnání textu jako „ centrum “ a zobrazí se jako „ blok “. V důsledku toho bude prvek přidán jako prvek bloku, počínaje novým řádkem a zabírajícím celou šířku.
CSS
A {zarovnání textu : centrum ;
Zobrazit : blok ;
}
Poznámka: Vlastnost CSS text-align nefunguje samostatně k vystředění značky. Proto musíte použít „ Zobrazit 'vlastnost a nastavte její hodnotu' blok “ pro vystředění odkazu.
Nyní přejděte do HTML a spusťte jej, abyste viděli následující výsledek. Zde vidíte, že odkaz je zarovnán na střed webové stránky:
Přejděme k druhému způsobu zarovnání odkazu na střed.
Metoda 2: Vycentrovat odkazy v CSS pomocí vlastnosti „margin“.
V CSS je „ okraj ” vlastnost se používá k vystředění odkazu. Je to zkrácená vlastnost „ okraj-levý “, “ okraj-pravý “, “ margin-top ', a ' okraj-dole vlastnosti. Hodnoty všech daných vlastností můžete nastavit na jednom řádku.
Syntax
Syntaxe vlastnosti margin je:
okraj : auto | horní že jo dno vlevo, odjetPopis výše uvedené syntaxe je uveden níže:
- auto: Slouží k nastavení prvků podle prohlížeče.
- horní: Slouží k nastavení okraje shora.
- že jo: Slouží k nastavení okraje zprava.
- knoflík: Slouží k nastavení okraje zespodu.
- vlevo, odjet: Slouží k nastavení okraje zleva.
Poznámka: Zadání dvou hodnot bude znamenat okraj shora a zdola a okraj zleva a zprava; pokud je však přidána jedna hodnota, okraj se použije na všechny čtyři strany.
Přejdeme k příkladu, kde vycentrujeme odkaz pomocí „ okraj ' vlastnictví.
Příklad
Nejprve nastavte hodnotu vlastnosti zobrazení jako „ blok “ a šířka jako „ 70 pixelů “. Poté použijte vlastnost margin a nastavte její hodnotu na „ auto “:
A {Zobrazit : blok ;
šířka : 70 pixelů ;
okraj : auto ;
}
Poznámka: ' Zobrazit ' a ' šířka ” vlastnost je nutné nastavit; jinak „ okraj „nemovitost nebude fungovat. Hodnotu vlastnosti width lze nastavit podle rozlišení obrazovky displeje a délky textu.
Z uvedeného obrázku můžete vidět, že odkaz je úspěšně vycentrován:
A je to! Vysvětlili jsme způsoby, jak vycentrovat odkaz.
Závěr
' zarovnání textu ' a ' okraj vlastnost se používá k vystředění odkazu s příspěvkem „ Zobrazit ' a ' šířka ' vlastnictví. Vlastnost display je nezbytná spolu s vlastností text-align, při použití vlastnosti margin jsou vlastnosti display i width povinné pro vystředění odkazu. Tato příručka pojednává o různých metodách vycentrování odkazu v CSS.