Center form in dropdown Bootstrap? - html

Question

I have a dropdown in bootstrap, but I don't know how to center a form I have within it.
Here is my code;
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Testing, 123</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<div class="dropdown-menu">
<form accept-charset="UTF-8" action="/sessions" method="post">
<fieldset class='textbox login'>
<label id='js-username'>
<span>Username</span>
<input autocomplete="on" id="username" name="username" type="text" size="20px"/>
</label>
<label id='password'>
<span>Password</span>
<input id="userpassword" name="userpassword" type="password" />
</label>
</fieldset>
<fieldset class='subchk'>
<input name="commit" type="submit" value="Log In" />
</fieldset>
</form>
</div>
</li>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
I have adjusted the width of the dropdown in the css to fit my form, I just can't work out how to center the form within the dropdown.

Answer 1

Without seeing your CSS it's hard to say for sure that this will work, but try this:
.dropdown-menu form {
width: *insert form width here in pixels*;
margin: 0 auto;
}
This answer assumes that the li with the class dropdown is bigger horizontally than your form, and you are trying to center the form within it. To center something horizontally using this method it must have a fixed width, and the width must be smaller than the parent element (in this case the li with the class dropdown).
Edited to add: I didn't realize how old this question was until after I answered it..

Answer 2

Just create a class with some padding and add it to your form tag, like so:
CSS
.wrap {
padding:15px;
}
HTML
<form class="wrap" accept-charset="UTF-8" action="/sessions" method="post">...</form>
Demo: http://jsfiddle.net/a52UY/

Answer 3

use center tag it might be help to you
<center> </center>
<div class="dropdown-menu">
<center>
<form accept-charset="UTF-8" action="/sessions" method="post">
.......
</form>
</center>