如何将我的搜索表单置于 div 中？

Question

我在 div 中有一个搜索表单

margin: 0 auto;

没有将它移到中心。知道如何纠正这个问题吗？

这是一张图片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;
}

Answer 1

你需要在 #postcode-search 狐狸示例 width: 300px; 上设置宽度，然后它将位于中心

Answer 2

使用纯 CSS 解决方案，您可以简单地使用 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>

Answer 3

这很简单。

我应用了 text-align:center 样式

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

这是一个有效的demo

Answer 4

你必须添加这个css

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

这是一个工作示例https://plnkr.co/edit/FSeAt3TkFeuGvj57hVgS?p=preview

Answer 5

将额外的 class“col-lg-offset-4”添加到“postcode-search”。因为您使用的是“col-lg-4”，所以它添加了样式 width: 33.33% 和 float: left。因此，下面的样式将不起作用。这是无用的风格。

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

您只需添加一个 bootstrap 网格偏移量 class 即可使您的表单在 DIV 内居中。

如何将我的搜索表单置于 div 中？

How do I center my search form within a div?

html

css

search-form