フロントエンド(html、cssなど)が苦手です。下図のようにコンテナ内のボタンを揃えたいです。コンテナには、いくつかの見出しといくつかのボタンがあります。私を出してください。
前もって感謝します。
2 つのbutton
要素があり、それらを中央に配置する場合はtext-align: center
、親に a を追加します。実際の例は次のとおりです: http://jsfiddle.net/skip405/uvAcj/
ボタン間の距離を指定する場合はmargin-left
、必要に応じてプロパティを調整するだけです。button:first-child
セレクターは最初のボタンを左に移動せず、完全に中央に配置されます。
あなたはこれを通してあなたの結果を達成することができます:-
HTML
<fieldset>
<legend>Container Heading</legend>
<button id="visit_return_button" type="submit">Button1</button>
<button id="visit_return_button" type="submit">Button2</button>
</fieldset>
CSS
fieldset {
border:1px solid;
width:200px;
height:70px;
display:table-cell;
vertical-align:middle;
text-align:center;
}
legend {
margin-left:5px;
}
#visit_return_button{
background-color:#9C8C42;
border: 2px solid #91782c;
color: #FFF;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px;
}
またはデモを参照してください:- http://jsfiddle.net/VY8xs/21/
<style>
div#container {
overflow:hidden;
border:1px solid #000;
width:200px;
position:relative;
padding:5px;
}
div#container > button {
float:left;
/*or float:right; */
}
</style>
<div>containing heading</div>
<div id="container">
<button>submit</button>
<button>cancel</button>
</div>
css float オプションを使用してこれを行うのが好きです。しかし、これを行うにはいくつかの方法があります。ボタンごとに div を作成し、css を使用して適切に配置する必要があります。
例えば:
CSS
#button1{
float: left;
margin-top: 10px;
}
#button2{
float:left;
margin-top: 10px;
margin-left: 10px;
}
HTML
<div id="container">
<div id="button1">
Your button HTML here
</div>
<div id="button2">
Your button HTML here
</div>
</div>