Center align links 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 Links in CSS

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.

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

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.

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 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”:

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.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

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:

Источник