How to Center Links in CSS

October 9, 2022 | by Arround The Web | No comments

Any element we add in HTML is displayed in the top-left corner of the screen by default. Although, you can modify the default position of an element by using different CSS properties. Similarly, when we add a link, it is displayed at its default position, but you can center align them using the CSS properties.

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:

text-align: value

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

<body>

<a href="https://linuxhint.com/">Linuxhint</a>

</body>

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:

margin: auto | top right bottom left

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.

Source: linuxhint.com