1

我在 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;
}
4

5 回答 5

2

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

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

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

于 2016-04-12T10:00:38.293 回答
1

使用纯 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>

于 2016-04-12T09:49:40.947 回答
0

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

于 2016-04-12T09:46:33.490 回答
0

这很简单。

我应用了text-align:center样式

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

这是一个工作演示

于 2016-04-12T09:49:41.133 回答
0

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

于 2016-04-12T09:56:40.967 回答