Question

我是面向HTML / CSS的新手，我正在使用Bootstrap让我的网站页面显示起来并且看起来很好并且响应迅速。但是我有一个带有输入搜索框的页面，并希望它在页面上居中。这就是我的HTML的样子：

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
/* for search bar */

.stylish-input-group .input-group-addon {
  background: white !important;
}
.stylish-input-group .form-control {
  border-right: 0;
  box-shadow: 0 0 0;
  border-color: #ccc;
}
.stylish-input-group button {
  border: 0;
  background: transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <div id="imaginary_container">
        <div class="input-group stylish-input-group">
          <input type="text" class="form-control" placeholder="search" autofocus>
          <span class="input-group-addon">
            <button type="submit">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

我希望做的是将搜索框置于页面中心，类似于Google的主页。有关如何实现这一目标的任何想法？感谢。

Answer 1

你真的需要在这里使用一个居中的概念。我使用了transform方法。

.container {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

这里的代码段：

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
/* for search bar */

.stylish-input-group .input-group-addon {
  background: white !important;
}
.stylish-input-group .form-control {
  border-right: 0;
  box-shadow: 0 0 0;
  border-color: #ccc;
}
.stylish-input-group button {
  border: 0;
  background: transparent;
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <div id="imaginary_container">
        <div class="input-group stylish-input-group">
          <input type="text" class="form-control" placeholder="search" autofocus>
          <span class="input-group-addon">
            <button type="submit">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Twitter Bootstrap中的中心形式：

<style type="text/css">
    .center {
        vertical-align: center;
    }
</style

<div class="row">
    <div class="col-xs-4 col-xs-offset-4 center">
        <form>
            <input type="text">
        </form>
    </div>
</div>

希望这有帮助！

Answer 3

只需使用flex布局，在div中添加一个类：

.search-bar {
  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */

  display: flex;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
      <div class="row search-bar">
        <div class="col-sm-6 col-sm-offset-3">
          <div id="imaginary_container">
            <div class="input-group stylish-input-group">
              <input type="text" class="form-control" placeholder="search" autofocus>
              <span class="input-group-addon">
                <button type="submit">
                  <span class="glyphicon glyphicon-search"></span>
                </button>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

然后使用display:flex和align-items:center作为您的CSS。

Answer 4

我只是使用flexbox居中进行垂直对齐

#imaginary_container{
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;

}

对于水平居中，您可以使用Bootstrap类.text-center 例如：

<div class="input-group text-center stylish-input-group" style="
text-align: center;"></div>

垂直和水平对齐页面上的Bootstrap行

4 个答案: