2

Why is the following CSS code not centering my button horizontally within a div...

 1 year ago
source link: https://www.echojs.com/news/41946
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Why is the following CSS code not centering my button horizontally within a div element?Techi11 2 hours ago. 

Why is the following CSS code not centering my button horizontally within a div element? It appears off-center on my webpage:

[code]<!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>
[/code]

The button seems to be slightly toward the left side within the container. What am I missing in the CSS preventing the button from being perfectly centered?

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK