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;
}
htmlcssreactjs

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to assign a value of 1 to the input-group spinner?

At first, I thought this problem would be easy to solve, but now I'm finding myself stuck. My goal is to have the input-group spinner display the value 1 when a user opens the application. <input id="option1" type="number" min="1" value ="1" ...

htmlangularjstwitter-bootstrap

Tips for triggering an error using promise.all in the absence of any returned data?

I'm dealing with an issue in my project where I need to handle errors if the API response returns no data. How can I accomplish this using Promise.all? export const fruitsColor = async () : Promise => { const response = await fetch(`....`); if( ...

javascriptreactjstypescriptapierror-handling

Tips on how to set up the TextField Material UI component to begin with white text and an underline

I'm currently working on customizing my material UI TextField element to be completely white. This includes both the label and the border, whether it's in focus or not. While I've successfully achieved a white appearance when the TextField ...

reactjsmaterial-ui

Run an ajax function when a variable is populated with data

My current dilemma involves a session variable email=$_GET['email'];. I am seeking a way to trigger an ajax function only when this variable is available, and to set it to do nothing if the variable is not present. What is the technique for invo ...

phphtmlajax

Create a duplicate array with all distinct elements - JavaScript

Help needed: I am facing an issue with an array of objects. My goal is to create a unique copy of this array to prevent any changes in the original one when modifications are made to the new array. I have experimented with several methods, including: let ...

javascriptarraysreactjscopyjavascript-objects

Error: The function setEmail is not defined. (In 'setEmail(input)', 'setEmail' is not recognized) (Cannot utilize hooks with context API)

App.js const[getScreen, showScreen] = useState(false); const[getEmail, setEmail] = useState(""); <LoginScreen/> <LoginContexts.Provider value={{getEmail,setEmail,getScreen,showScreen}}> {showScreen?<Screen2/>:<LoginScre ...

javascriptreactjstypescriptreact-nativereact-context

Arranging Bootstrap divs vertically and then horizontally in mobile view

My website layout is relatively straightforward. It consists of a header at the top, a navigation bar with an image inside a column on the left, and the main content displayed on the right side. https://i.stack.imgur.com/yYzaG.png For mobile responsive vi ...

htmlcssbootstrap-4responsive

Attempting to utilize a random value with tailwind's background image feature is ineffective

Can anyone help me with displaying an image on the background using tailwind's https://tailwindcss.com/docs/background-image#arbitrary-values Interestingly, when I use the exact same URL in a normal img tag, the image shows up without any issues. Be ...

reactjstailwind-css

Tips for converting a React mousemove Class to a functional Component

I have implemented a button that closes a navigation menu and follows the mouse cursor. While everything is functioning as intended, I am encountering a deprecation warning that I would like to resolve. The warning seems to be related to the useEffect hook ...

reactjsrefactoringreact-functional-componentreact-class-based-component

What is the best way to assign a jQuery variable to a PHP variable?

After spending some time searching and working on it, I still can't figure out the answer to this straightforward question. Here is the code I have been struggling with. <script> function calculate() { var total = (parseInt($('#stude ...

htmlajaxjquery

Customizing Pie Legends in Echart Configuration

I am trying to find a way to present pie chart legends along with their values in a unique format. I have attached an image for reference. Despite my efforts, I haven't been able to figure out how to achieve this specific display. If you take a look a ...

javascriptreactjspie-chartecharts

Press the Text and Alter Text with React

I'm having an issue with the onClick event using React hooks. My goal is to have the text change to a different one when the user clicks, and then revert back to the original text on another click. For example, clicking "Change First" should switch it ...

javascriptreactjsreact-hooks

Steps to Create an HTML Text Box that cannot be clicked

Does anyone know of a way to prevent a text box from being clicked without disabling it or blocking mouse hover events? I can't disable the text box because that would interfere with my jQuery tool tips, and blocking mouse hover events is not an opti ...

javascripthtmlcss

Move to the right with floating using Angular Material

I am dealing with a situation in which I have an md-card-content element. Inside it, there is a div and another md-card-content element. The challenge I am facing is that I want to move the contents of the inner md-card-content to the right. I tried usin ...

htmlcssuser-interfaceangular-material

Learn how to easily copy all the text from a grid in React JS by utilizing the "Copy All" icon from MUI

Hey everyone, I've included "Copy All" material UI icons in my grid. The grid consists of 2 columns and 2 rows. I want to be able to copy all the values in the columns and rows when the copy all icon is clicked. Code: const items=[{ id:1, name:' ...

reactjsreact-hooksmaterial-uireact-material-ui-form-validator

How to properly set margins for button components in Material UI

I'm working with a centered Toolbar in Material UI that consists of 3 components, each being a button. My goal is to add some margin around each button. I attempted to use the {mt} option within the component button, but didn't see any changes re ...

cssmaterial-ui

What is the best way to substitute multiple substrings with strings from multiple interconnected arrays?

Looking for a way to manipulate a lengthy string in JS? Seeking to add new characters to each match within the string to create a fresh output? Need to handle multiple occurrences of a specific substring in the long text? Any strategies or suggestions? con ...

javascriptreactjsstring

CSS styling: Adjusting button placement to appear to the right of an HTML table

I've encountered a challenge with an HTML table that has dynamically generated columns through Ajax calls and jQuery, resulting in a variable table width. My aim is to include buttons at the top and bottom of the table that are aligned to the right b ...

htmlcss

Utilizing AngularJS to handle the reception and storage of HTML entities

I am having an issue storing and displaying HTML content (using an HTML editor) in my AngularJS WebApp. The problem is that the code appears as plain text. Here is the JSApp code: $scope.SkipValidation = function (value) { var decoded = $("#showtext" ...

phphtmlangularjs

What is the best way to utilize FrameSet in Internet Explorer 11?

index.html: While the code can be utilized in Chrome and Microsoft Edge, it encounters issues with Explorer 11. Using Internet Explorer 11 results in an error message preventing JavaScript usage. If you have a solution for resolving URL-related problems, ...

htmlurlinternet-explorer-11