如何使用CSS使按钮居中？
如何使用CSS使按钮居中？
提问于 2016-04-20 08:28:04
我正在尝试添加一个按钮到我的简单网页。按钮本身看起来很棒，但我不太确定如何定位它。我希望它居中并定位在正文下方。它目前坐在左边。你知道该怎么做吗？
<!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>任何帮助都将不胜感激。谢谢!
回答 5
Stack Overflow用户
发布于 2016-04-20 08:35:35
你不一定需要一个容器。尝试以下操作：
.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;
}自动边距不适用于行内块元素。
Stack Overflow用户
发布于 2016-04-20 08:34:08
您可以向按钮添加一个容器并将它们对齐到中心。请参见下面的示例
同样，当您尝试创建样式时也是如此。尝试让它们尽可能地可重用。这样做的一个好处是你可以编写更少的css。
#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;
}
.text-center {
text-align: center;
}<div class id="logo">
<h1>ERIK SPIEKERMANN</h1>
</div>
<div class id="sub">
<p>Designer Typographer Entrepreneur </p>
</div>
<div class="text-center">
<a href="#" class="button">Learn More</a>
</div>
Stack Overflow用户
发布于 2016-04-20 08:35:02
尝试将按钮放在<div>中并使其成为text-align:center
<div class="btnContainer ">
<a href="#" class="button">Learn More</a>
</div>
<style>
.btnContainer {
text-align:center;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36731757
复制相关文章
相似问题
腾讯云开发者
