如何垂直對齊大於默認的<input>內的自舉字形

Question

我必須製作比常規要大的<input>。高度必須是55px。我無法垂直對齊橙色方塊內的字形圖像。它看起來像這樣：

它應該是這樣的：

我已經用我的<i>元素的margin-top嘗試，但降得它移動矩形，我需要移動剛剛字形。它看起來像這樣：

請讓我知道，如果你有任何想法如何我可以垂直居中橙色框中的字形。 我已經安裝在https://jsfiddle.net/vteL375o/1/

HTML中的jsfiddle：

<div class="container"> 

    <div class="form-group has-feedback" style="margin-top:20px;"> 
    <input type="text" id="search-query" class="form-control not-rounded search-input"> 

    <i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i> 
    </div> 

</div> 

CSS：

.not-rounded { 
    border-radius: 0; 
} 

.search-input { 
    font-size: 20px; 
    margin-bottom: 50px; 
    height: 55px; 
} 

.glyph-class { 
    height: 55px; 
    width: 55px; 
    color:white; 
    background-color: orange; 
    font-size: 20px; 
} 

Answer 1

您可以在此情況下，使用Flexbox這一點，或inline-flex。

.not-rounded { 
 
    border-radius: 0; 
 
} 
 
input.search-input { 
 
    font-size: 20px; 
 
    margin-bottom: 50px; 
 
    height: 55px; 
 
} 
 

 
.glyphicon.glyphicon-search.form-control-feedback.glyph-class { 
 
    height: 55px; 
 
    width: 55px; 
 
    color: white; 
 
    background-color: orange; 
 
    display: inline-flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="form-group has-feedback" style="margin-top:20px;"> 
 
    <input type="text" id="search-query" class="form-control not-rounded search-input"> 
 
    <i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i> 
 
    </div> 
 
</div>

Answer 2

添加line-height: 55px;到.glyph-class。

input.not-rounded { 
 
    border-radius: 0; 
 
} 
 
input.search-input { 
 
    font-size: 20px; 
 
    margin-bottom: 50px; 
 
    height: 55px; 
 
} 
 
i.glyph-class { 
 
    height: 55px; 
 
    width: 55px; 
 
    color: white; 
 
    background-color: orange; 
 
    font-size: 20px; 
 
    line-height: 55px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="form-group has-feedback" style="margin-top:20px;"> 
 
    <input type="text" id="search-query" class="form-control not-rounded search-input"> 
 
    <i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i> 
 
    </div> 
 
</div>

Answer 3

剛剛在添加padding: 10px 0;您.glyph級

這樣

.glyph-class { 
    height: 55px; 
    width: 55px; 
    color:white; 
    background-color: orange; 
    font-size: 20px; 
    padding: 10px 0; 
} 

這裏是正在運行的樣本：https://jsfiddle.net/vteL375o/6/