divのアライメントセンターを使用しているときにテーブルの上にあるブートストラップボタン

Question

バックエンドの開発者として、フロントエンドがどれほどハードなのかわかりませんでした。

は、どのように私は、テーブルの左側の上に「作成」ボタンを置くことができます：表がでているので 今ボタンがテーブルの真ん中にあります。これは完全なコードです：

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

ボタンは要素です。

おかげ

EDIT：完全なページは次のようになります私はこのようなページを見て欲しいです。

テキストの上やテーブルの作成]ボタンの下にセンタリングする必要があります。私がアライメントセンターdivからボタンを引っ張ると、完全に左に現れます。

Answer 1

ボタンに

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

Answer 2

をクラス.pull左の追加の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>