如何在CSS中對齊項目（垂直）？

這裏是我的CSS代碼：如何在CSS中對齊項目（垂直）？

.well-searchbox { 
    margin: auto; 
    width: 50%; 
    border: 3px solid green; 
    padding: 10px; 
    background: rgba(0, 0, 0, 0.6); 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
}

以上CSS水平但不對齊的項目在垂直中，我試圖vertical-align: middle和height: 50%，但沒有奏效。

下面是我申請.well-searchbox（第一行）的HTML代碼：

<div class="well-searchbox"> 
      <form class="form-horizontal" role="form"> 
       <div class="form-group"> 
        <label class="col-md-4 control-label">Keyword</label> 
        <div class="col-md-8"> 
         <input type="text" class="form-control" placeholder="Keyword"> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="col-md-4 control-label">Country</label> 
        <div class="col-md-8"> 
         <select class="form-control" placeholder="Country"> 
          <!-- some code --> 
         </select> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="col-md-4 control-label">Province</label> 
        <div class="col-md-8"> 
         <select class="form-control" placeholder="Province"> 
          <!-- some code --> 
         </select> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="col-md-4 control-label">City</label> 
        <div class="col-md-8"> 
         <select class="form-control" placeholder="City"> 
          <!-- some code --> 
         </select> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="col-md-4 control-label">Category</label> 
        <div class="col-md-8"> 
         <select class="form-control" placeholder="Category"> 
          <!-- some code --> 
         </select> 
        </div> 
       </div> 
       <div class="col-sm-offset-4 col-sm-5"> 
        <button type="submit" class="btn btn-success">Search</button> 
       </div> 
      </form> 
     </div>

我可以請有什麼屬性我應該用齊齊搜索框垂直中間的一些指導？

來源

2017-09-21 Behrouz Riahi

請發表[MCVE] – j08691

垂直對齊還取決於父元素的設置 - 你需要發佈更多的代碼 – Johannes

可能dulipcate https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div – sn3ll

您可以使用transform屬性進行造型。

您可以添加相應的元素按照你的CSS，使其垂直對齊

.element { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

來源

2017-09-21 19:06:49

如何在CSS中對齊項目（垂直）？

回答

相關問題