How do I center my search form within a div?

Question

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

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;
}

score 2 · Accepted Answer · answered Apr 12 '16 at 10:00

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.

score 1 · Answer 2 · answered Apr 12 '16 at 09:49

Using a pure CSS solution you can simply do this, using text-align:

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

  <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>

score 0 · Answer 3 · answered Apr 12 '16 at 09:46

0

You need to width on #postcode-search fox example width: 300px; then it will be in center

answered Apr 12 '16 at 09:46

Adnan Akram

641
3
11

So the use of bootstraps col-lg-4 in html isn't enough? – TDP Apr 12 '16 at 09:48
This won't render a responsive solution. – Satej S Apr 12 '16 at 09:51
@SatejS you can change width in media query or you can use width in % – Adnan Akram Apr 12 '16 at 09:56
@TDP col-lg-4 will be another solution with a col-lc-offset-2. then search bar will also be in middle – Adnan Akram Apr 12 '16 at 09:57

score 0 · Answer 4 · answered Apr 12 '16 at 09:49

0

This is quite simple.

I applied the text-align:center style

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

Here is a working demo

answered Apr 12 '16 at 09:49

Satej S

2,113
1
16
22

score 0 · Answer 5 · answered Apr 12 '16 at 09:56

you have to add this css

.postcode-search {
  width: 300px; // change value as per requirement
  padding: 30px; // optional
}
.postcode-search.col-lg-4 {
  margin: auto;
}

here is a working example https://plnkr.co/edit/FSeAt3TkFeuGvj57hVgS?p=preview

How do I center my search form within a div?

5 Answers5