Align link to center in html

How TO — Centered Top Navigation

Learn how to create a navigation bar with a centered link/logo.

Centered Menu Link

Create a Top Navigation Bar

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* Add a black background color to the top navigation */
.topnav position: relative;
background-color: #333;
overflow: hidden;
>

/* Style the links inside the navigation bar */
.topnav a float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Change the color of links on hover */
.topnav a:hover background-color: #ddd;
color: black;
>

/* Add a color to the active/current link */
.topnav a.active background-color: #04AA6D;
color: white;
>

/* Centered section inside the top navigation */
.topnav-centered a float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>

/* Right-aligned section inside the top navigation */
.topnav-right float: right;
>

/* Responsive navigation menu — display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) .topnav a, .topnav-right float: none;
display: block;
>

.topnav-centered a position: relative;
top: 0;
left: 0;
transform: none;
>
>

Tip: To create mobile-friendly, responsive navigation bars, read our How To — Responsive Top Navigation tutorial.

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Источник

How to center a link using CSS

In this article, you will learn how to center a hyperlink using CSS.

For all examples that follow, imagine we have the following anchor tag:

Table of contents

1) Centering links by putting it inside of a text aligned div.

Place the HTML link inside of a div. In the styles for the div, apply text-align:center and make the anchor tag an inline-block (display:inline-block).

 style="text-align:center">  href="#" style="display:inline-block">A random link  

2) Centering links by putting it inside of a flex container

Place the link inside of a div. In the styles, apply «display:flex» and «justify-content:center» to the div.

 style="display:flex; justify-content:center">  href="#">A random link  

3) Centering links by putting it inside of a grid container

Very similar to flex, place the link inside of a div. In the styles, apply «display:grid» and «justify-content:center» to the div.

 style="display:grid; justify-content:center">  href="#">A random link  

Centering a link vertically and horizontally

To center a hyperlink vertically and horizontally, you can continue using either flex or grid.

In the examples below, I set a background-color and a height on the div so that you can see the link centered vertically and horizontally.

Flex

To center the anchor tag with flex. Add these properties to the div: display:flex; justify-content:center; align-items:center. The code would look like:

 style="height: 100px; background-color:#CDCDCD; display:flex; justify-content:center; align-items:center">  href="#">A random link  

Grid

Similarly, to center the link with grid, add these properties to the div: display:grid; justify-content:center; align-items:center. the code would look like:

 style="height: 100px; background-color:#CDCDCD; display:grid; justify-content:center; align-items:center">  href="#">A random link  

Why not just turn the anchor tag into a block element to center it?

Technically, to center a hyperlink, you can set its display property to block and apply text-align:center. The problem with this is that the link will span the entire line it’s in.

I will demonstrate what I mean by adding a background color to the link:

 href="#" style="display:block; text-align:center; background-color:#CDCDCD">A random link 

As you can see, the entire width is taken. In contrast, the methods I showed you above, if you apply a background color to, would look like:

Summary

You now know how to center an HTML link (anchor tags) with CSS. All 3 methods accomplish the same thing, so choose any.

Want to learn how to code and make money online? Check out CodingPhase (referral link)

Источник

How to Center Links in CSS?

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.

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 , it by default doesn’t work.

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.

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:

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:

This link is centered This link is also centered

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 .

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 :

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.

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.

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.

Related posts:

Источник