Is there a way to align my anchor tag so that my link appears perfectly centered both vertically and horizontally on the page?

Question

Is there a way to align my anchor tag so that my link appears perfectly centered both vertically and horizontally on the page?

Despite my efforts to find a solution, I am stuck with this issue. Here is the code I have been working on:

<a href='/Customers' class='centre'>Start</a>

I attempted to wrap it in a div tag and also wanted to add a small grey background box around it.

This is the CSS code I have used:

a {
    width: 100%;
    height: 250px;
    display: inline-block;
}

.centre {
    text-align: center;
    display: inline-block;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    background-color: grey;
}

html css reactjs

Answer 1

Answer №1

Utilize the power of flex. In addition, make use of these 4 code lines to align elements vertically:

*{
  box-sizing: border-box;
}
body{
  margin: 0;
}
div{
  width: 100%;
  height: 200px;
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute; /*here*/
  top: 50%; /*here*/
  transform: translateY(-50%); /*here*/
  margin: 0; /*here*/
}


.centre {
    text-align: center;
    line-height: 150px; /*for aligning of text vertically in anchor tag*/
    background-color: red;
    width: 90%;
    display: inline-block;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color: white;
}

<div>
<a href='/Customers' class='centre'>Start</a>
</div>

To gain a deeper understanding of flex, refer to the initial comment.

Answer 2

Utilize the power of flex. In addition, make use of these 4 code lines to align elements vertically:

*{
  box-sizing: border-box;
}
body{
  margin: 0;
}
div{
  width: 100%;
  height: 200px;
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute; /*here*/
  top: 50%; /*here*/
  transform: translateY(-50%); /*here*/
  margin: 0; /*here*/
}


.centre {
    text-align: center;
    line-height: 150px; /*for aligning of text vertically in anchor tag*/
    background-color: red;
    width: 90%;
    display: inline-block;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    color: white;
}

<div>
<a href='/Customers' class='centre'>Start</a>
</div>

To gain a deeper understanding of flex, refer to the initial comment.

Answer 3

Answer №2

To achieve the desired outcome with your provided code snippet, simply make the following adjustments: Instead of using display: inline-block, switch to display: flex and include these attributes:

justify-content: center; align-items: center;

.linkContainer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.button {
    border-radius: 5px;
    text-align: center;
    width: 75px;
    padding: 5px 10px;
    background-color: grey;
}

.button a {
    color: white;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}

<div class="linkContainer">
  <div class="button"><a href="#">Start</a></div>
</div>

I have made edits to the code to transform your link into a "button", which should improve clarity for you.

Additionally, I suggest exploring some basic HTML concepts on your own: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

Answer 4

To achieve the desired outcome with your provided code snippet, simply make the following adjustments: Instead of using display: inline-block, switch to display: flex and include these attributes:

justify-content: center; align-items: center;

.linkContainer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.button {
    border-radius: 5px;
    text-align: center;
    width: 75px;
    padding: 5px 10px;
    background-color: grey;
}

.button a {
    color: white;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}

<div class="linkContainer">
  <div class="button"><a href="#">Start</a></div>
</div>

I have made edits to the code to transform your link into a "button", which should improve clarity for you.

Additionally, I suggest exploring some basic HTML concepts on your own: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

Is there a way to align my anchor tag so that my link appears perfectly centered both vertically and horizontally on the page?

Answer №1

Answer №2

Similar questions

Guide to rendering a menu using recursion

`Loading CSS and JS files in node.js: A step-by-step guide`

Disallow the generation of React components

A problem with the Recharts line chart where the top line is being cut

What is the best way to coordinate text and photos within Bootstrap?

Having trouble with the ".." shorthand not working in the HTML image directory path

Search the database to retrieve a specific value from a multi-dimensional array

Error: Attempts to access the 'avatar' property of a null value result in a TypeError

Ways to restructure a CSS class into a Material-UI class

I am experiencing difficulties with my HTML and CSS code not functioning as I had initially intended

Problem with React Native Camera: Camera display is not functioning correctly - React-Native-Vision-Camera Error

Can reducers be nested within each other in a Redux store?

Utilizing complex data with Angular 5 [Select+Option] - a comprehensive guide

Getting the initial date of the upcoming month in JavaScript

Activate audio when the link is clicked

Locate the initial div with a distinct class from the bottom upwards

Learn how to implement a split background effect by simply clicking the SPLIT button

Begin the NextJS project by redirecting the user to the Auth0 page without delay

Is OpenLayers + Ajax causing issues or errors?

Next.js app experiencing issues with Chakra UI not transitioning to dark mode