Има два метода за центриране на връзката:
- Центрирайте връзките в CSS с помощта на „ подравняване на текст ' Имот
- Центрирайте връзките в CSS с помощта на „ марж ' Имот
В тази статия ще обясним и двата метода за центриране на връзката. И така, да започваме!
Метод 1: Центриране на връзки в CSS с помощта на свойството за подравняване на текст
За да центрираме връзките в HTML, ще използваме „ подравняване на текст ” собственост на CSS. „ подравняване на текст ” в CSS се използва за коригиране на подравняването на текст като ляво, дясно, централно и подравняване.
Синтаксис
Синтаксисът на свойството text-align е:
подравняване на текст : стойност
На мястото на „ стойност ”, можете да зададете подравняването на текст като ляво, дясно, централно и оправдано.
Сега ще използваме „ подравняване на текст ”, за да центрирате дадените връзки.
Пример
За да центрираме връзка на уеб страница, ще добавим връзка в HTML вътре в тага
. За да направите това, използвайте тага , за да дефинирате хипервръзка и да дадете адреса на необходимия сайт. След това посочете името на връзката. В нашия случай сме добавили връзката към нашия уебсайт Linuxhint.HTML
< тяло >< а href = „https://linuxhint.com/“ > Linux < / а >
< / тяло >
Предоставеното по-долу изображение показва, че е добавена връзката, която е позиционирана от лявата страна по подразбиране:
Сега преминете към CSS, за да центрирате връзката.
Тук ще използваме „ а ”, за да получите достъп до добавената връзка. След това задайте стойността на text-align като „ център ” и се показва като „ блок ”. В резултат на това елементът ще бъде добавен като блоков елемент, започвайки от нов ред и заемайки цялата ширина.
CSS
а {подравняване на текст : център ;
дисплей : блок ;
}
Забележка: CSS свойството за подравняване на текст не работи самостоятелно за центриране на маркера. Следователно трябва да използвате „ дисплей „свойство и задайте стойността му“ блок ”, за да центрирате връзката.
Сега преминете към HTML и го изпълнете, за да видите следния резултат. Тук можете да видите, че връзката е подравнена в центъра на уеб страницата:
Нека преминем към втория метод за подравняване на връзката в центъра.
Метод 2: Центрирайте връзки в CSS, като използвате свойството „margin“.
В CSS, „ марж ” се използва за центриране на връзката. Това е съкратеното свойство на „ margin-left ”, “ margin-right ”, “ margin-top ', и ' margin-bottom ' Имоти. Можете да зададете стойностите на всички дадени свойства в един ред.
Синтаксис
Синтаксисът на свойството маржин е:
марж : Автоматичен | Горна част точно отдолу налявоОписанието на предоставения по-горе синтаксис е дадено по-долу:
- Автоматичен: Използва се за настройка на елементи според браузъра.
- Горна част: Използва се за задаване на полето отгоре.
- дясно: Използва се за задаване на полето отдясно.
- бутон: Използва се за задаване на полето отдолу.
- наляво: Използва се за задаване на полето отляво.
Забележка: Посочването на две стойности ще означава полето отгоре и отдолу и полето отляво и отдясно; ако обаче се добави една стойност, маржът ще се приложи към всичките четири страни.
Нека преминем към примера, където ще центрираме връзка с помощта на „ марж ' Имот.
Пример
Първо задайте стойността на свойството за показване като „ блок ” и ширината като „ 70px ”. След това приложете свойството margin и задайте стойността му на „ Автоматичен ”:
а {дисплей : блок ;
ширина : 70px ;
марж : Автоматичен ;
}
Забележка: „ дисплей ' и ' ширина ” е необходимо да се зададе свойството; в противен случай „ марж ” собственост няма да работи. Стойността на свойството width може да бъде зададена според разделителната способност на екрана и дължината на текста.
Можете да видите от даденото изображение, че връзката е центрирана успешно:
Това е! Обяснихме методите за центриране на връзката.
Заключение
„ подравняване на текст ' и ' марж ” се използва за центриране на връзката с приноса на „ дисплей ' и ' ширина ' Имот. Свойството display е необходимо заедно със свойството за подравняване на текста, докато използвате свойството margin, свойствата display и width са задължителни за центриране на връзката. Това ръководство обсъжда различни методи за центриране на връзка в CSS.