Kingkong Kingkong - 1 year ago 125
CSS Question

Center Bootstrap form-control to center of browser

Im trying to center the form control to the center of my website, but for some reason the CSS doesnt apply to the form-control, but it applies to everything else in the div...

This my HTML:

<div id="search">
<h2 style="color:deepskyblue">Enter battle-tag</h2>
<div class="row">
<div class="col-md-12">
@using (Html.BeginForm())
@Html.TextBox("profileId", null, new { @class = "form-control" }); <br />
<p style="color:red">Replace the "#" in your battle-tag with an "-"</p>
<p style="color:red"> Search is Case-Sensitive </p>
<button class="btn btn-primary" type="submit"> Find Player </button>

And this is my CSS:

body {
height: 100%;
width: 100%;

.body-content {
padding-left: 15px;
padding-right: 15px;

.dl-horizontal dt {
white-space: normal;

textarea {
max-width: 280px;


Obviously the Bootstrap.css is default, I havent touched it at all.

Answer Source

You can centre a element by rendering it as inline-block, and set parent's text-align attribute to center.

<div style="text-align:center;">
    <div style="display:inline-block;">This should be in the middle</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download