How can I centre my anchor tag to make my link in the centre of the page (height and width)

Question

I know this is a generic question, but I looked everywhere and couldn't find anything, here's my code :

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

I tried encasing this in a div tag too but couldn't get that to work. I also want a small grey box around it as a background.

my css code:

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

sorry, forgot to add, its in the question now, its to do with the display: inline-block; but im not sure what to replace it with — max14, Mar 02 '22 at 13:19
Protip: [don't name your CSS classes after their appearance](https://stackoverflow.com/questions/6222731/should-css-class-names-like-floatleft-that-directly-describe-the-attached-styl). What if you don't want your `` to be centered anymore? You'll still be stuck with the class name `centre`. — Dai, Mar 02 '22 at 13:20
You need to show us the greater HTML structure that encloses the `` element. — Dai, Mar 02 '22 at 13:21
@Dai there is nothing else, I've literally just started, also, thats a temporary name for the class, Im still deciding on what to call it — max14, Mar 02 '22 at 13:40

Arman Ebrahimi · Answer 1 · 2022-03-02T15:38:53.437

1

Use flex. Also, use from 4 code lines specified for aligned 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>

For more knowing about flex, see the first comment.

edited Mar 02 '22 at 15:38

answered Mar 02 '22 at 14:31

Arman Ebrahimi

2,035
2
7
20

1

Might be good to give the OP some guidance as to where they can [**learn more about Flex**](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) – Martin Mar 02 '22 at 14:35
@Martin Yes right. Thanks for you. – Arman Ebrahimi Mar 02 '22 at 15:40

VebDav · Answer 2 · 2022-03-02T14:35:33.093

With your given code snippet you can do it like below. Just change display: inline-block to display: flex and add those attirbutes:

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 did edit this code. Your link is now a "button", so it might be easier for you to understand.

But I'd recommend you to learn a bit on your own: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics

this didnt work unfortunately, the link ends up being able to be clicked from most of the page and the grey box is too big — max14, Mar 02 '22 at 13:54
I did edit you the previous code, so i guess this is something you are looking for — VebDav, Mar 02 '22 at 14:36

How can I centre my anchor tag to make my link in the centre of the page (height and width)

2 Answers2