Question

我在div中有一个搜索表单

margin: 0 auto;

没有将它移到中心。有任何想法如何纠正这个？

以下是引用

的图片链接

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

添加其他课程＆＃34; col-lg-offset-4 ＆＃34;到＆＃34; 邮政编码搜索＆＃34;。因为您正在使用＆＃34; col-lg-4 ＆＃34;它添加了样式宽度：33.33％和float：left 。所以，下面的风格不会起作用。这是无用的风格。

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

您只需添加一个引导网格偏移类，即可将表单置于DIV中心。

Answer 2

使用纯CSS解决方案，您只需使用text-align：

即可

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您需要在#postcode-search fox示例width: 300px;上加宽，然后它将位于中心

Answer 4

这很简单。

我应用了text-align:center样式

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

这是一个有效的demo

Answer 5

你必须添加这个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

如何将我的搜索表单放在div中？

5 个答案: