html - 使用 CSS 定位 HTML 按钮

Question

到目前为止，我在浏览器中显示了 3 个按钮，它们都使用相同的 CSS 代码。然而，它们被放置在标题中图像的正下方，并且按钮的一部分被截断了。我正在尝试将 3 个按钮放置在页面中央并且间距相等。

按钮的 CSS 代码:

.btn {
   background: #3498db;
   background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
   background-image: -moz-linear-gradient(top, #3498db, #2980b9);
   background-image: -ms-linear-gradient(top, #3498db, #2980b9);
   background-image: -o-linear-gradient(top, #3498db, #2980b9);
   background-image: linear-gradient(to bottom, #3498db, #2980b9);
   font-family: Arial;
   color: #ffffff;
   font-size: 25px;
   padding: 20px 40px 20px 40px;
   text-decoration: none;
}
.btn:hover {
   background: #3cb0fd;
   background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
   background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
   background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
   background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
   background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
   text-decoration: none;
}

显示 3 个按钮的 HTML 代码:

<button class="btn">Entry forms</button>
<button class="btn">Scoresheets</button>
<button class="btn">Results</button>

Answer 1

尝试使用 text-align: center 样式将按钮包裹在 div 中。

我在这里更新了你的 fiddle :http://jsfiddle.net/5prdmmak/2/