0

I'm trying to center a button on my website, so I tried left : 50% to get it to the middle of the screen, but for some reason it brings it all the way to the right side of the screen. Here's the code:

#ContactButton {
    font-size: 20px;
    border: none;
    width : 120px;
    position : relative;
    height: 30px;
    font-weight: 500;
    border-radius: 30px;
    left : 50%;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Tom W
  • 59
  • 2
  • 9
  • 1
    Use one of these methods to center your button, don't use `left: 50%` https://css-tricks.com/centering-css-complete-guide/ ... Check the "Flexbox" solution, that should work for you. – cloned Feb 02 '22 at 13:41

1 Answers1

2

There are many ways. On the button itself, you can just use margin: 0 auto;.

Or you could maybe just use text-align: center on the button's container.

Or, for example, you could use flexbox on the buttons container:

.container{
   display: flex;
   justify-content: center;
}

And there are several other possibilities. Check the link @cloned gave you on his comment.

Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118
  • Thanks for the response, whenever I use any of those methods, it still puts it to the top right of the screen. I think it may be because I'm currently on a laptop with a small screen. – Tom W Feb 02 '22 at 13:49
  • Mmm, do not mix those methods with your original code. Also, take a closer look at the button's container. Maybe the issue is there. Use colored backgrounds to temporarily highlight elements areas, or just use you browser's console/dev tools and check bot the button and its container(s). – Luca Reghellin Feb 02 '22 at 14:13