CODEWITHSUNDEEP
htmlcsssearch-form
TDP
TDP

Reputation: 97

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

Upvotes: 1

Views: 1073

Answers (5)

Rahul K
Rahul K

Reputation: 928

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.

Upvotes: 2

S4beR
S4beR

Reputation: 1847

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

Upvotes: 0

Satej S
Satej S

Reputation: 2156

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

Upvotes: 0

Martino Lessio
Martino Lessio

Reputation: 781

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>

Upvotes: 1

Adnan Akram
Adnan Akram

Reputation: 641

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

Upvotes: 0

Related Questions