0
我正在嘗試讓文本在選擇框中間垂直對齊。我認爲儘可能簡化所有內容，同時保留我想要的功能和自定義，但您可以在示例中看到，雖然我可以將文本輸入和選擇字段設置爲相同高度，但文本可以選擇字段不在中心垂直對齊。CSS：文本輸入和選擇框垂直對齊
我錯過了什麼？
*, *::before, *::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.row {
\t display: flex;
\t flex-direction: row;
\t flex-wrap: wrap;
}
.col-6 {
\t flex: 1;
-ms-flex-preferred-size: 50%;
\t flex-basis: 50%;
\t max-width: 50%;
padding: 0.5em;
}
hr {
\t display: block;
\t border: none;
\t margin: 2em 0;
\t clear: both;
}
/* **** Start Form Elements **** */
.field-icon-append {
\t position: relative;
}
.field-icon-append span {
\t position: absolute;
\t line-height: 1;
\t top: 25%;
\t right: 10px; \t
\t pointer-events: none;
}
.field-icon-append input, .field-icon-append select {
\t padding-right: 30px;
}
input, select {
width: 100%;
border: 1px solid #acacac;
\t min-height: 40px;
\t color: inherit;
padding: 0.4em;
display: inline-block;
white-space: nowrap;
cursor: auto;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input.narrow, select.narrow {
\t min-height: 30px;
}<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=1.0' type='text/css' media='all' />
<div class="row">
\t <div class="col-6">
\t \t
\t \t <div class="field-icon-append">
\t \t
\t \t \t <span><i class="fa fa-search"></i></span>
\t \t \t
\t \t \t <input type="text" name="EmailAddress" />
\t \t </div>
\t
\t </div> <!-- /.col-6 -->
\t
\t <div class="col-6">
\t \t
\t \t <div class="field-icon-append">
\t \t \t
\t \t \t <span><i class="fa fa-chevron-down"></i></span>
\t \t
\t \t \t <select>
\t <option value="1">First</option>
\t <option value="2">Second</option>
\t <option value="3">Third</option>
\t <option value="4">Fourth</option>
\t </select>
\t \t </div>
\t
\t </div> <!-- /.col-6 -->
</div> <!-- /.row -->
<hr />
<div class="row">
\t <div class="col-6">
\t \t
\t \t <div class="field-icon-append">
\t \t
\t \t \t <span><i class="fa fa-search"></i></span>
\t \t \t
\t \t \t <input type="text" name="Search" class="narrow" />
\t \t </div>
\t
\t </div> <!-- /.col-6 -->
\t
\t <div class="col-6">
\t \t
\t \t <div class="field-icon-append">
\t \t \t
\t \t \t <span><i class="fa fa-chevron-down"></i></span>
\t \t
\t \t \t <select class="narrow">
\t <option value="1">First</option>
\t <option value="2">Second</option>
\t <option value="3">Third</option>
\t <option value="4">Fourth</option>
\t </select>
\t \t </div>
\t
\t </div> <!-- /.col-6 -->
</div> <!-- /.row -->
，你可以嘗試的line-height：11像素爲好。 – ilwcss
是啊剛剛開始設置行高與選擇高度相同的值 –