Twitter Bootstrapを使用してフォームを作成していますが、ボタンの中央揃えが非常に困難です。スパンが7のdiv内に含まれています。下はHTMLで、ボタンは一番下にあります。このことを中心に置く方法に関する推奨事項はありますか?
<div class="form span7">
<div id="get-started">
<div id="form-intro">
<strong><h1>1. Get Started: Some basics</h1></strong>
</div>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputSaving">What are you saving for?</label>
<div class="controls">
<input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
</div>
</div>
<div class="control-group">
<label class="control-label" for="description">Add a short description</label>
<div class="controls">
<textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="categoryselect">Choose a Category</label>
<div class="controls">
<select class="span4" id="categoryselect">
<!-- Add some CSS and JS to make a placeholder value-->
<option value="Kittens">Kittens</option>
<option value="Keyboard Cat">Keyboard Cat</option>
<option value="Twitter Bird">Twitter Bird</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="imageselect">Choose an image</label>
<div class="controls span4">
<img src="piggyimage.png" id="imageselect" alt="image-select" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="goal">Your Saving Goal</label>
<div class="controls">
<input type="text" class="span4" id="goal" placeholder="$1337">
</div>
</div>
<button class="btn btn-large btn-primary" type="button">Submit</button>
</form>
</div>
</div>
ブートストラップには、text-centerという名前の独自のセンタリングクラスがあります。
<div class="span7 text-center"></div>
もう少しマークアップを気にしないなら、これはうまくいくでしょう:
<div class="centered">
<button class="btn btn-large btn-primary" type="button">Submit</button>
</div>
対応するCSSルールの場合:
.centered
{
text-align:center;
}
btn
クラスのCSSルールを調べる必要がありますが、幅を指定しているとは思わないため、auto
の左右の余白は機能しません。ただし、span
またはinput-
ルールのいずれかをボタンに追加した場合、自動マージンwouldは機能します。
編集:
最初の考えを確認しました。 btn
クラスにはnot幅が定義されているため、自動サイドマージンを使用できません。また、 @ AndrewM notesのように、新しいルールセットを作成する代わりに、単にtext-center
クラスを使用することもできます。
「text-center」クラスでスタイル設定されたdivでラップします。
質問は少し古いですが、簡単な方法は.center-blockをボタンに適用することです。
テキストではなくボタンを中央に配置したいので、過去にクラスを追加し、そのクラスを使用してボタンを中央に配置しました。
<button class="btn btn-large btn-primary newclass" type="button">Submit</button>
cSSは次のようになります。
.btn.newclass {width:25%; display:block; margin: 0 auto;}
「幅」の値はユーザー次第であり、それを試して正しい外観を得ることができます。
スティーブ
.span7.btn { display: block; margin-left: auto; margin-right: auto; }
私はブートストラップに完全に精通しているわけではありませんが、上記のようなものでうまくいくはずです。すべてのクラスを含める必要はありません。これにより、親であるspan7内のボタンが中央に配置されます。
複数のボタンがある場合は、次のことができます。
<div class="center-block" style="max-width:400px">
<a href="#" class="btn btn-success">Accept</a>
<a href="#" class="btn btn-danger"> Reject</a>
</div>
ブートストラップには特定のクラスがあります:center-block
<button type="button" class="your_class center-block"> Book </button>