Search code examples
htmlcsssearch-form

How do I center my search form within a div?

I've got a search form within a div that

margin: 0 auto;

isn't moving it to the center. Any idea's of how to correct this?

Here's an image link to reference link

HTML: 

  <div id="welcome">
    <div class="search-row">
      <div class="postcode-search col-lg-4">
        <div id="postcode-search" class="input-group">
          <input type="text" id="postcode-bar" class="form-control" placeholder="Enter postcode.."/>
          <span class="input-group-btn">
            <button class="btn btn-default" id="postcode-btn" type="button">FIND STORES</button>
          </span>
        </div>
      </div>
    </div>
  </div>

CSS:

#welcome {
    height: 220px;
    border: 1px solid yellow;
}
#postcode-search {
    margin: 0 auto;
    padding: 0px;
}
#postcode-bar {
    height: 50px;
    background-color: #fff;
    text-align: center;
    font-size: 13px;
}
#postcode-btn {
    height: 50px;
}
Solution

  • Add additional class "col-lg-offset-4" to "postcode-search". Because you are using "col-lg-4" it adds style width: 33.33% and float: left. So, The style below won't work. This is Useless style.

    #postcode-search {
  margin: 0 auto;
  padding: 0px;
}

    You just have to add one bootstrap grid offset class to center your form within a DIV.