我正在尝试向我的简单网页添加一个按钮。按钮本身看起来不错，但我不太确定如何放置它。我希望它居中并位于正文下方。它目前位于左侧。知道怎么做吗？
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="spiekermann.css">
<title></title>
<style>
#logo {
width: 100%;
text-align: center;
padding: 10em 0 0.2em 0;
font-family: lato;
}
#sub {
color: #fff;
font-family: lato;
text-align: center;
word-spacing: 5em;
}
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
}
.button:hover {
background-color: #707488;
}
</style>
</head>
<body>
<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<a href="#" class="button">Learn More</a>
</body>
</html>
如有任何帮助，我们将不胜感激。谢谢!
最佳答案
您不一定需要容器。尝试以下操作:
.button {
background-color: #3b3d45;
border: 6px solid #fff080;
display: block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 15px 20px;
text-decoration: none;
margin: auto;
text-align: center;
width: 62px;
}
自动边距不适用于行内 block 元素。
关于html - 如何使用 CSS 使按钮居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36731757/