Question

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

butttons的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

尝试使用样式div {/ 1}}包裹您的按钮。

我在这里更新了你的小提琴：http://jsfiddle.net/5prdmmak/2/

Answer 2

您可以将三个<buttons>包裹在<div>内，并将text-align: center分配给<div>。此外，要在三个按钮之间添加相等的空格，您可以使用CSS将margin-right: 10px;添加到.btn:first-child, .btn:nth-child(2)。

.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;
    }
#buttons {
    text-align: center;
}

.btn:first-child, .btn:nth-child(2)  {
    margin-right: 10px;
}

<center><img src="http://www.placehold.it/350x150" /></center>
<div id="buttons"><button class="btn">Entry forms</button>
<button class="btn">Scoresheets</button>
<button class="btn">Results</button></div>

Answer 3

您可以将它们放在带有text-align：center

的div中

<div style="text-align:center;"> 
<button class="btn">Entry forms</button>
<button class="btn">Scoresheets</button>
<button class="btn">Results</button>
</div>

Answer 4

您可以将代码分配给div，如上所述，或分配给带有

的表格

<table style="text-align:center;">
  <tr>
    <td>
      first_button_data_here
    </td>
    <td>
      second_button_data_here
    </td>
    <td>
      third_button_data_here
    </td>
  <tr>
</table>

使用CSS定位HTML按钮

4 个答案: