Links are an essential part of a website as they allow visitors to navigate between different pages, access the important resources of the website and help in improving users’ overall experience.
In HTML, a link is represented by an anchor tag <a>. It uses an href attribute to specify the destination of the link.
When you add a link to your HTML page, it is by default aligned to the left side of its container. But many times we come across situations where we need to align it to the center.
In this article, I’ll show you why the regular centering approach doesn’t work with links and how we can fix them.
So, without any further ado, let’s begin.
Why the text-align: center; doesn’t Work with Links?
In CSS, the text-align property is used to horizontally align the text of an HTML element. It can align the text to the left, right or center based on the value passed to it. For eg., if you set the text-align to center, ideally it should align the element’s text to its center.
However, when you apply the text-align: center; to an anchor tag <a>, it by default doesn’t work.
That’s because the <a> is an inline HTML element. An inline element doesn’t start on a new line and only takes up as much width as required to fit its content. The images, buttons, inputs, links, and spans, etc. are all inline elements.
Because of their inline nature, you can not directly center their text with the text-align: center; property. However, we can very easily fix this problem. Let’s see it in the next section.
Centering Links with text-align: center; Property
As we discussed above, the text-align: center; by default doesn’t work with links because they are inline in nature.
So, to center align a link with the text-align property, we have to first wrap it with a block-level element such as a div, or paragraph and then apply the text-align: center; property on the wrapper itself.
Applying text-align: center; on the div will automatically pull its content to the center.
<div>
<a href="https://wikipedia.org">This link is centered</a>
</div>
Add the CSS:
div{
text-align: center; /* Center align its content*/
border: 2px solid crimson;
padding: 10px;
}
Output:
As you can see from the above output, the link is horizontally centered within its container div because we have set the text-align property to center.
You can also run the above code in our online HTML editor to preview the changes live:
Example:
div{
text-align: center; /* Center align its content*/
border: 2px solid crimson;
padding: 10px;
}
Solution 2:
If you don’t want to put the link in any parent container and still want to center it horizontally, then you have to first make the link like a block element and then apply text-align: center; on it.
To make a link behave like a block-level element, you can simply set its display property to block and then use the text-align: center; to horizontally center its text:
<a href="https://wikipedia.org">This link is centered</a> <a href="https://wikipedia.com">This link is also centered</a>
Add the CSS:
a{
display: block; /* Make block type */
text-align: center; /* Center align its text*/
}
Output:
While using this method you have to keep in mind that each link will start on a new line as it is now behaving as a block-level element. Therefore, you should better go with the first approach.
Centering Links with Flexbox
Flexbox is a layout model in CSS that allows you to create flexible and responsive layouts for web pages.
You can also use it to align items both horizontally as well as vertically.
To center align links with the flexbox model, you have to first put the link in a container such as a div and then make it a flex container by setting its display property to flex.
Now, to center the link horizontally within the flex container, you can set the justify-content property to center.
<div>
<a href="https://wikipediaa.org">This link is centered</a>
</div>
Add the CSS:
div{
display: flex; /* Make flex container */
justify-content: center; /* Center horizontally */
border: 2px dashed crimson;
padding: 10px;
}
Output:
Centering Links Vertically and Horizontally
If you also want to center the link vertically within its container, you can use the align-items property.
The align-items property aligns the flex items vertically within their flex container.
To center the link vertically within the flex container, you can simply set its align-items property to center:
<div>
<a href="https://wikipedia.org">This link is centered</a>
</div>
Add the CSS:
div{
display: flex; /* Make flex container */
justify-content: center; /* Center horizontally */
align-items: center; /* Center Vertically */
height: 120px;
border: 2px dashed crimson;
}
Output:
Centering Links using CSS Grids
Just like the flexbox, you can also use CSS grids to center the links both horizontally as well as vertically.
The grids in CSS are used to create flexible 2-dimensional layouts.
To center align a link with CSS grids, you have to first put it in a container such as a div and then make it a grid container by setting its display property to grid just like we did for the flexbox.
Now you can use the justify-content and align-items properties to horizontally and vertically align the links within the grid container.
<div>
<a href="https://wikipedia.org">This link is centered</a>
</div>
Add the CSS:
div{
display: grid; /* Make Grid container */
justify-content: center; /* Center horizontally */
align-items: center; /* Center Vertically */
height: 120px;
border: 2px dotted crimson;
}
Output:
Centering Links with Margin Auto
The margin: auto; is a very popular technique to center align elements horizontally in CSS.
But this technique only works with block-level elements such as divs, paragraphs, lists, etc.
So, if you want to center align a link with margin: auto; you have to first make it a block-level element by setting its display property to block and then apply the margin: auto; on it.
The next thing you have to do is, set its width to some fixed value so that the browser could automatically place it in the exact center of its container.
<div>
<a href="https://wikipedia.org">This link is centered</a>
</div>
Add the CSS:
a{
display: block;
width: 50%;
margin: auto;
text-align: center;
}
div{
border: 2px dotted crimson;
padding: 20px;
margin: 100px 30px;
}
Output:
Conclusion
In this article, we learned different ways of aligning a link to the center of its container both horizontally as well as vertically.
In summary, if you want to center align a link with CSS, you can wrap it with a block-level element such as a div or paragraph and then apply text-align: center; on the wrapper itself. This will automatically pull the link to the center of its parent.
There are several other approaches that you can also use to center align the links such as flexbox, grids, margin: auto; etc. It’s totally up to you which approach you want to use.
Thanks for reading.
