使用Twitter Bootstrap中心搜索字段

Question

由于大多数人似乎都有这个问题，我已经经历了很多答案，但是没有一个对我有用。

我希望将搜索框和搜索按钮放在中心

<div class="hero-unit">
<div class="main-top-container">
        <%= simple_form_for(@search, :url => search_properties_path, :method => :post, :html=> { class: 'input-height', id: 'main_search_form' }) do |f| %>
            <div class="row main-top-search-row">
                <div class="container">
                    <div class="row">
                        <h1 class="col-sm-12 search-title">Find magic</h1>
                        <div class="main-top-searchfield col-sm-4">
                            <%= f.input :location, :required => false, label: false, input_html: {id: "search_query", class: "form-control typeahead"}, :placeholder => "Search..." %>
                        </div>
                        <%= button_tag( :class => "btn btn-primary btn-custom-red col-md-1", :id => "search_button") do %>
                            Search
                        <% end %>
                      <!--  <div class="col-sm-3 col-sm-offset-1">
                            <a class="how-it-works" href="/faq">How It works</a>
                        </div> -->
                    </div>
                </div>
            </div> 
        <% end %>
    </div>
</div>

我曾尝试在每个元素上使用CSS，但由于某种原因，它不允许我对齐中心.....

Answer 1

DEMO：https://jsbin.com/piwefi/

<强> CSS：

html,
body {
    height: 100% /* not necessary if you have a fixed height on the feature area */
}
/* ------ featurette */
.featurette {
    display: table;
    width: 100%;
    height: 30%; /* set a pixel height and then remove the body,html height */
    vertical-align: middle;
    background: #555;
    color: #fff;
}
.featurette-inner {
    display: table-cell;
    vertical-align: middle;
}
.featurette .search {
    padding: 3%;
    max-width: 980px; /*max width of search*/
    margin: 0 auto;
}
.no-margin-top {
    margin-top: 0
}


/* ------ form-control-lg */
.form-control-lg {
    min-height: 46px;
    border-radius: 6px;
    font-size: 18px;
    line-height: normal;
}


/* ------ disjointed form group custom */
.featurette .search.has-button .btn {
    margin-top: 5px;
    width: 100%;
}
@media (min-width:480px) { 
    .featurette .search.has-button .form-group {
        position: relative;
        padding-right: 99px; /*space for button*/
    }
    .featurette .search.has-button .btn {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        margin: 0;
    }
}

<强> HTML

<!-- example 1 -->

<div class="featurette">
   <div class="featurette-inner text-center">
      <form role="form" class="search">
         <h3 class="no-margin-top h1">Search Me.</h3>
         <div class="input-group input-group-lg">
            <input type="search" placeholder="search" class="form-control">
            <span class="input-group-btn">
            <button class="btn btn-danger" type="button">Search</button>
            </span>
         </div>
         <!-- /input-group -->
      </form>
      <!-- /.max-width on this form -->

   </div>
   <!-- /.featurette-inner (display:table-cell) -->

</div>
<!-- /.featurette (display:table) -->

<hr>

<!-- example 2 -->
<div class="featurette">
   <div class="featurette-inner text-center">
      <form role="form" class="search has-button">
         <h3 class="no-margin-top h1">Search Me.</h3>
         <div class="form-group">
            <input type="search" placeholder="search" class="form-control form-control-lg">
            <button class="btn btn-lg btn-warning" type="button">Search</button>
         </div>
         <!-- /form-group -->
      </form>
      <!-- /.max-width on this form -->

   </div>
   <!-- /.featurette-inner (display:table-cell) -->

</div>
<!-- /.featurette (display:table) -->