html - CSS:文本输入和选择框垂直对齐

Question

我很难让文本在我的选择框中间垂直对齐。我认为我已尽可能简化所有内容，同时保留我想要的功能和自定义，但您可以在示例中看到，虽然我可以使文本输入和选择字段具有相同的高度，但文本选择字段未在中心垂直对齐。

我错过了什么？

*, *::before, *::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.col-6 {
	flex: 1;
    -ms-flex-preferred-size: 50%;
	flex-basis: 50%;
	max-width: 50%;
    padding: 0.5em;
}
hr {
	display: block;
	border: none;
	margin: 2em 0;
	clear: both;
}

/* **** Start Form Elements **** */

.field-icon-append {
	position: relative;
}
.field-icon-append span {
	position: absolute;
	line-height: 1;
	top: 25%;
	right: 10px;	
	pointer-events: none;
}
.field-icon-append input, .field-icon-append select {
	padding-right: 30px;
}
input, select {
    width: 100%;
    border: 1px solid #acacac;
	min-height: 40px;
	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 {
	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">

	<div class="col-6">
		
		<div class="field-icon-append">
		
			<span><i class="fa fa-search"></i></span>
			
			<input type="text" name="EmailAddress" />

		</div>
	
	</div> <!-- /.col-6 -->
	
	<div class="col-6">
		
		<div class="field-icon-append">
			
			<span><i class="fa fa-chevron-down"></i></span>
		
			<select>
	            <option value="1">First</option>
	            <option value="2">Second</option>
	            <option value="3">Third</option>
	            <option value="4">Fourth</option>
	        </select>

		</div>
	
	</div> <!-- /.col-6 -->

</div> <!-- /.row -->

<hr />

<div class="row">

	<div class="col-6">
		
		<div class="field-icon-append">
		
			<span><i class="fa fa-search"></i></span>
			
			<input type="text" name="Search" class="narrow" />

		</div>
	
	</div> <!-- /.col-6 -->
	
	<div class="col-6">
		
		<div class="field-icon-append">
			
			<span><i class="fa fa-chevron-down"></i></span>
		
			<select class="narrow">
	            <option value="1">First</option>
	            <option value="2">Second</option>
	            <option value="3">Third</option>
	            <option value="4">Fourth</option>
	        </select>

		</div>
	
	</div> <!-- /.col-6 -->

</div> <!-- /.row -->

Answer 1

我简单地添加了 class="mid"至 <select />和CSS

.mid {
  text-indent: 50%;
}

这是它直到最后的样子:

*, *::before, *::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.col-6 {
	flex: 1;
    -ms-flex-preferred-size: 50%;
	flex-basis: 50%;
	max-width: 50%;
    padding: 0.5em;
}
hr {
	display: block;
	border: none;
	margin: 2em 0;
	clear: both;
}

/* **** Start Form Elements **** */

.field-icon-append {
	position: relative;
}
.field-icon-append span {
	position: absolute;
	line-height: 1;
	top: 25%;
	right: 10px;	
	pointer-events: none;
}
.field-icon-append input, .field-icon-append select {
	padding-right: 30px;
}
input, select {
    width: 100%;
    border: 1px solid #acacac;
	min-height: 40px;
	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 {
	min-height: 30px;
}

.mid {
  text-indent: 50%;
}

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

	<div class="col-6">
		
		<div class="field-icon-append">
		
			<span><i class="fa fa-search"></i></span>
			
			<input type="text" name="EmailAddress" />

		</div>
	
	</div> <!-- /.col-6 -->
	
	<div class="col-6">
		
		<div class="field-icon-append">
			
			<span><i class="fa fa-chevron-down"></i></span>
		
			<select class="mid">
	            <option value="1">First</option>
	            <option value="2">Second</option>
	            <option value="3">Third</option>
	            <option value="4">Fourth</option>
	        </select>

		</div>
	
	</div> <!-- /.col-6 -->

</div> <!-- /.row -->

<hr />

<div class="row">

	<div class="col-6">
		
		<div class="field-icon-append">
		
			<span><i class="fa fa-search"></i></span>
			
			<input type="text" name="Search" class="narrow" />

		</div>
	
	</div> <!-- /.col-6 -->
	
	<div class="col-6">
		
		<div class="field-icon-append">
			
			<span><i class="fa fa-chevron-down"></i></span>
		
			<select class="narrow mid">
	            <option value="1">First</option>
	            <option value="2">Second</option>
	            <option value="3">Third</option>
	            <option value="4">Fourth</option>
	        </select>

		</div>
	
	</div> <!-- /.col-6 -->

</div> <!-- /.row -->

这是你能做到的最大值，<option />标签不能与中间对齐..