0

I have the following form

<div class="form-group">
<div class="col-xs-10">
    <div class="span7 text-center vcenter">
        <form id="formid" method="get">
            <label for="platform" class="control-label">Enter Code, IMEI or Phone Number:</label><br />
            <input type="text" class="form-control" name="filtername" placeholder="Please Enter Code" />
            <input id="btngo" class="btn btn-success" value="GO" />
        </form>
        @using (Html.BeginForm("Index", "Home", FormMethod.Get))
        {
            <p>
                @Html.TextBox("filtername")
                <input type="submit" class="btn btn-success" value="GO" />
            </p>
        }
    </div>
</div>

And CSS:

.vcenter {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}

I'm trying to vertically center the above form element keeping the page responsive but I cant get the code in any of the following posts to work for me. This leads me to be believe either their's something different about my code or I'm just plain doing it wrong.

Can anyone explain the bootstrap way to center?

Some code bits Ive tried:

...

class="pagination-centered"

Previous Posts Ive tried: Twitter Bootstrap 3, vertically center content How to center align vertically the container in bootstrap vertical-align with Bootstrap 3

Community
  • 1
  • 1
Baggerz
  • 387
  • 6
  • 11
  • 24
  • Have a look at @chris-coyier's article http://css-tricks.com/centering-in-the-unknown/ – HJ05 Sep 22 '14 at 16:50

1 Answers1

2

Try this fiddle.

I've changed a bit the css:

.outer {
    display:table;
    height:300px;
    text-align:center;
}
.vcenter {
    display:table-cell;
    vertical-align:middle;
}
Florin Pop
  • 5,105
  • 3
  • 25
  • 58