Bootstrap centre horizontal form - css

Question

I'm trying to centre a horizontal form in a hero unit, by setting text-align:center; and then display:block-inline;
See jsfiddle for a demo http://jsfiddle.net/bVJZ2/
But this hasn't quite worked in that the checkbox and submit button are not correctly aligned any more. Any suggestions how to fix this?

Answer 1

There are some problems that doesn't allow you to center the checkbox.
<div class="controls"> has a margin-left. You shouldn't put your checkbox inside a that div.
The input[checkbox] has a float: left. You should remove that float with:
.radio input[type="radio"], .checkbox input[type="checkbox"] {
float: none;
}
The checkbox is bad aligned. You should add vertical-align: top to the last selector.
To sum up:
HTML:
<div class="control-group">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
CSS:
.radio input[type="radio"], .checkbox input[type="checkbox"] {
float: none;
vertical-align: top;
}
You can see the result here: http://jsfiddle.net/GW8zk/

Answer 2

Well This is how you can implement a Hero-unit with form centered in middle .
JSFiddle with centered form http://jsfiddle.net/shail/YmmVS/
First the css :
.hero-unit {
padding:50px 50px 50px 50px;
}
.form-horizontal .control-label {
width: 61px;
}
.form-horizontal .controls {
margin-left: 80px;
}
/* Landscape phones and down */
#media (max-width: 480px) {
.hero-unit{
margin-left:-20px;
margin-right:-20px;
}
.form-horizontal .controls {
margin-left: 0;
}
}
The Html Part :
<div class="container">
<div class="hero-unit">
<div class="row-fluid">
<div class="offset4 span4">
<legend>Sign in to WebApp</legend>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">Remember me</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>