垂直方向と水平方向のブートストラップ行を整列するページ

Question

私は正面から見たHTML/CSSが新しく、ブートストラップを使用して自分のサイトページを表示して見栄えがよく、応答性が高いです。しかし、私は入力された検索ボックスがあるページを持っていて、それをページの中央に置いて欲しい。これは私の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のホームページに似たページ、上の検索ボックスを中央にあります。どのように私はこれを達成することができます上の任意のアイデア？ありがとう。 Twitterのブートストラップで

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

中心の形：

<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

単純に、フレックスレイアウトを使用して、あなたの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>

あなたのCSSにはdisplay:flexとalign-items:centerを使用してください。

Answer 4

私はちょうど垂直整列のために水平方向のセンタリングのために

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

}

を中心とフレキシボックスを使用すると思います。たとえば、ブートストラップクラスの.text-センター を使用することができます。

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