垂直和水平對齊引導行第

我對前端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>

我所希望做的是居中的頁面，類似於谷歌的網頁搜索框。有關我如何完成此任何想法？謝謝。

來源

2016-12-12 ng150716

你的代碼已經在工作，你爲什麼覺得不工作？如果你的意思是在較小的窗口只需添加col-md-6和col-xs-6到你的div，然後分別col-md-offset-3和col-xs-offset-3 – Yaser

你真的需要在這裏使用一個居中概念。我已經使用了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>

來源

2016-12-12 21:16:28

是這樣做的，但它似乎拉長了我的頁面（我可以在1080p顯示器上垂直滾動），所以我將位置形式的絕對位置改爲固定位置。我又是一個noob，應該固定的位置是我遠離的東西嗎？ – ng150716

@ ng150716是的，'位置：絕對'是爲你做的。所以做一件事。在容器頂部添加另一個「超大容器」並添加樣式。這應該保持一切完好無損。 –

你絕對的權利，我將轉換應用到嵌套在'容器'中的另一個類，將樣式應用於容器解決了所有問題。 – ng150716

在Twitter的引導中心的形式：

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

希望這有助於！

來源

2016-12-12 21:13:34 pascalallen

垂直居中......見我的答案。 '：）' –

不確定...讓OP說。我已經刪除了你的downvote。 –

只需使用柔性佈局，添加一個類你的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。

來源

2016-12-12 21:20:02 Yaser

我只是用Flexbox的中心垂直對齊

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

來源

2016-12-12 21:22:15

垂直和水平對齊引導行第

回答

相關問題