中心按钮 (HTML CSS)
Posted
技术标签:
【中文标题】中心按钮 (HTML CSS)【英文标题】：Center button (HTML CSS) 【发布时间】：2018-12-25 18:58:27 【问题描述】：更新： 感谢您的回答和cmets！我现在明白了！我基本上只是复制并粘贴在那里，但我现在可能有更多的了解。谢谢！
我正在尝试在 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>
【问题讨论】：
首先您的a 元素在语义上是错误的，您不能将button 放在a 元素中，请参阅：***.com/questions/6393827/…。另外，我建议您阅读此w3schools.com/html/html_intro.asp 和此w3schools.com/css/css_intro.asp
你可以添加一个“text-align: center;”到您的 a(anchor) 标记的容器。
不过，您可以将 button 类似的类赋予 a 元素。
【参考方案1】：
最简单的方法是使用 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>【讨论】：
【参考方案2】：您可以通过应用 css 来实现元素的水平居中
文本对齐：居中
在父 html 元素上。在下面的示例中，我添加了一个父 div 并给它一个类。使用该类，我应用了中心。
.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>【讨论】：
如果您正在寻找水平和垂直中心，@Obsidian Age 的解决方案会更好。 Flexbox 是用于居中的新酷炫。【参考方案3】：首先，您的代码中有一些错误。我们不能在锚标签内使用按钮标签。如果您希望锚看起来像按钮，您可以将所需的类添加到锚标签。 现在要使按钮居中，您需要用一些块级标签将其包裹起来并使用文本居中对齐。
<!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)的主要内容，如果未能解决你的问题，请参考以下文章