HTML/CSSで1つのボタンを中央に配置し、他のボタンを左右に配置する

Question

タイトルには、「コントロールパネル」という種類のボタンがあります。私は一つのボタンが中央にあり、他のボタンはその両側に置かれることを望みます。彼らはさまざまなサイズですが、必要であれば、私はそれらを同じサイズにすることができます。これを達成するための簡単な方法はありますか？

関連するHTML/CSS：

<div id=controls> 
     <button type=button class=tools id=save>Download Doodle</button> 
     <button type=button class=tools id=clear>Clear Canvas</button> 
     <button type=button id=doodle>Doodle!</button> 
</div> 

---

/*Control Panel*/ 
#controls{ 
    position:relative; 
    background-color:black; 
    margin:0px; 
    padding:0px; 
    display:block; 
    width:100%; 
    padding:15px 0px; 
    z-index:1; 
    text-align:center; 
} 

button{ 
    display:block; 
    color:white; 
    padding:5px 10px; 
    width:auto; 
    -webkit-transition-duration: 1s; /* Safari */ 
    transition-duration: 1s; 
    background-color:black; 
    border:3px solid white; 
    border-radius:10px; 
    margin: 0px 10px 0px 0px; 
    float:left; 
} 

.tools{ 
    display:none; 
} 

#doodle{ 
    float:none; 
} 
button:hover{ 
    background-color:white; 
    color:black; 
} 

/*End Control Panel*/ 

Answer 1

あなたは隣同士に要素を配置するフロートCSSプロパティを使用することができます。あなたはそれについてここで読むことができますhttp://www.w3schools.com/css/css_float.asp

適切な距離を得るために余白を調整します。

希望これは、あなたが、何が起こるか、そして何が起こるしたいんしようとしている何のコード

button{ 
 
float:left; 
 
    background-color:blue; 
 
    border:0; 
 
    color:white; 
 
    margin-right:10%; 
 
    
 
}

 
<button>button 1</button> 
 
<button>button 2</button> 
 
<button>button 3</button>