使用div对齐中心时，桌子上方的Bootstrap按钮

Question

作为后端开发者，我不知道前端有多难;）。

如何将＆＃34;创建＆＃34;桌子左侧上方的按钮： 现在，按钮位于表格的中间，因为表格位于表格中。这是完整的代码：

<div align="center">
<h1>All Tournaments </h1>
<p>Show: <a href="/tournaments/?show=played" id="tournament_link">History</a> or <a href="/tournaments/?show=unplayed" id="tournament_link">Unplayed</a></p>
        <a href="create/" class="btn btn-default">Create</a>

<table style="width:50%" id="tournament_table">
<tr id="table_head">
    <th>Name</th>
    <th>Players needed</th>
    <th>Rounds</th>
    <th>Host</th>
    <th>Select robot</th>
      <th>Played</th>
    <th>Join tournament</th>

按钮是元素。我希望页面看起来像这样：

由于

编辑：完整页面如下所示。

上面的文字和“创建”按钮下方的表格需要居中。如果我从对齐中心div拉出按钮，它将完全显示在左侧。

Answer 1

将一个类.pull-left添加到按钮

<a href="create/" class="btn btn-default pull-left">Create</a>
<div class="clearfix"></div>

Answer 2

包装div并在父级上添加类text-left，如下所示：

<div align="center" style="width: 50%; margin: 0 auto">
    <div class="text-left">
        <h1>All Tournaments </h1>
        <p>Show: <a href="/tournaments/?show=played" id="tournament_link">History</a> or <a href="/tournaments/?show=unplayed" id="tournament_link">Unplayed</a></p>
        <a href="create/" class="btn btn-default">Create</a>
    </div>
    <table id="tournament_table">
       <tr id="table_head">
          <th>Name</th>
          <th>Players needed</th>
          <th>Rounds</th>
          <th>Host</th>
          <th>Select robot</th>
          <th>Join tournament</th>
          <th>Played</th>
       </tr>
    </table>
</div>