中心按钮（HTML CSS）

Question

更新：感谢您的回答和评论！我现在明白了！我基本上只是将它复制并粘贴到那里，但我现在可能有了更多的理解。谢谢！

我正在尝试在 Squarespace 网站上放置一个自定义按钮。我不知道 html 或 css。我有按钮，但似乎无法在页面上正确居中，尽管在这里查找了一堆关于居中按钮的答案。

如何让这个按钮居中？

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    background-color: #3B96F7; /* blue */
    border: none;
    color: white;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #3DB8FE;
    color: white;
}


.button {border-radius: 60px;}


</style>
</head>
<body>


<a href="https://www.childrenschoir.com/about-the-rvcc/"><button class="button button">About The Choir</button> </a>


</body>
</html>

Answer 1

您可以通过应用 css

来实现元素的水平居中

text-align:center

在父 html 元素上。在下面的示例中，我添加了一个父项 div 并给它一个 class。使用那个 class，我应用了中心。

.parentContainer {
  text-align: center;
}

.button {
  background-color: #3B96F7;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button {
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #3DB8FE;
  color: white;
}

.button {
  border-radius: 60px;
}

<div class="parentContainer">
  <a href="https://www.childrenschoir.com/about-the-rvcc/"><button class="button button">About The Choir</button> </a>
</div>

Answer 2

最简单的方法是使用 flexbox.

只需将按钮包裹在容器中（例如<div class="button-container">，然后给容器指定以下规则：

.button-container {
  isplay: flex;
  align-items: center;
  justify-content: center;
}

从这里开始只需要给它一个height.
如果你想让它占满整个页面，你可以使用height: 100vh.

请注意，您还需要适应 body 上的默认值 margin，可以用以下内容覆盖它：

body {
  margin: 0;
}

这可以在下面看到：

body {
  margin: 0;
}

.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh);
}

.button {
  background-color: #3B96F7;
  /* blue */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button {
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #3DB8FE;
  color: white;
}

.button {
  border-radius: 60px;
}

<div class="button-container">
  <a href="https://www.childrenschoir.com/about-the-rvcc/"><button class="button button">About The Choir</button></a>
</div>

Answer 3

首先你的代码有一些错误。我们不能在锚标记内使用按钮标记。如果您希望锚点看起来像按钮，您可以将所需的 class 添加到锚点标签。现在为了使按钮居中，您需要用一些块级标记将其包裹起来并使用文本居中对齐。

<!DOCTYPE html>
<html> 
<head>
<style> 
.button-wrap { text-align: center; } 
.button { background-color: #3B96F7; /* blue */ 
border: none; 
color: white; 
padding: 20px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
font-size: 16px; 
margin: 4px 2px; 
cursor: pointer; 
}
.button { -webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s; 
}
.button:hover { background-color: #3DB8FE;
color: white; 
} 
.button { border-radius: 60px;} 
</style> 
</head> 
<body> 
<div class="button-wrap">
<a href="https://www.childrenschoir.com/about-the-rvcc/" class="button">About The Choir</a>
</div>
</body>
</html>

中心按钮（HTML CSS）

Center button (HTML CSS)

html

css

center

button

alignment