There are two methods to center the link:
In this article, we will explain both methods to center the link. So, let’s start!
Method 1: Center Links in CSS Using text-align Property
To center the links in HTML, we will use the “text-align” property of CSS. The “text-align” property in CSS is utilized to adjust the alignment of text such as left, right, center, and justify alignment.
Syntax
The syntax of the text-align property is:
In the place of “value”, you can set the alignment of text such as left, right, center, and justify.
Now, we will use the “text-align” to center align the given links.
Example
To center a link on a web page, we will add a link in HTML inside the <body> tag. To do so, use the <a> tag to define a hyperlink and give the required site’s address. After that, specify the name of the link. In our case, we have added the link to our Linuxhint website.
HTML
The below-provided image indicates that the link is added which is positioned on the left side by default:
Now move to the CSS to center the link.
Here, we will use “a” to access the added link. After that, set the value of text-align as “center” and display as “block”. As a result, the element will be added as a block element, starting at a new line and taking up the whole width.
CSS
text-align: center;
display: block;
}
Note: CSS text-align property doesn’t work alone to center the tag. Therefore, you must use the “display” property and set its value “block” to center the link.
Now, move to the HTML and execute it to see the following outcome. Here, you can see that the link is aligned at the center of the webpage:
Let’s move to the second method to align the link in the center.
Method 2: Center Links in CSS Using “margin” Property
In CSS, the “margin” property is utilized to center the link. It is the shorthand property of “margin-left”, “margin-right”, “margin-top”, and “margin-bottom” properties. You can set the values of all the given properties in a single line.
Syntax
Syntax of margin property is:
The description of the above-provided syntax is given below:
- auto: It is used to set elements according to the browser.
- top: It is used to set the margin from the top.
- right: It is used to set the margin from the right.
- button: It is used to set the margin from the bottom.
- left: It is used to set the margin from the left.
Note: Specifying two values will signify the margin from top and bottom and the margin from left and right; however, if one value is added, the margin will be applied to all four sides.
Let’s move to the example, where we will center a link using the “margin” property.
Example
Firstly set the value of the display property as “block” and the width as “70px”. After that, apply the margin property and set its value to “auto”:
display: block;
width: 70px;
margin: auto;
}
Note: The “display” and “width” property is necessary to set; otherwise, the “margin” property will not work. The value of the width property can be set according to the resolution of the display screen and the length of the text.
You can see from the given image that the link is centered successfully:
That’s it! We explained the methods to center the link.
Conclusion
The “text-align” and “margin” property is used to center the link with the contribution of the “display” and “width” property. The display property is necessary along with the text-align property, while using the margin property, both the display and width properties are compulsory to center the link. This guide has discussed different methods to center a link in CSS.
