Techi11 Posted August 18, 2023 Share Posted August 18, 2023 Why is the following CSS code not centering my button horizontally within a div element? It appears off-center in my webpage: <!DOCTYPE html> <html> <head> <style> .container { width: 100%; display: flex; justify-content: center; align-items: center; } .btn { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; } </style> </head> <body> <div class="container"> <button class="btn">Click Me</button> </div> </body> </html> The button seems to be slightly towards the left side within the container. What am I missing in the CSS that is preventing the button from being perfectly centered? Quote Link to comment Share on other sites More sharing options...
cli345 Posted August 29, 2023 Share Posted August 29, 2023 Maybe, it's an optical illusion due to the fact that initial capital "C" is taller than final letter "e". I've tested your code and it looks perfectly centered to me. Techi11 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.