CSS：文本输入并选择框垂直对齐

Question

我正在努力让文本在我的选择框中间垂直对齐。我认为在保持我想要的功能和自定义的同时，我可以获得所有简化的内容，但是您可以在示例中看到，虽然我可以将文本输入和选择字段设置为相同的高度，但是文本在选择字段不会在中心垂直对齐。

我错过了什么？

＆＃13;

＆＃13;

*, *::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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我已将<select />简单地添加到.mid { text-indent: 50%; } 和css

*, *::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 />

这是你可以做的最大值，.标签无法与中间对齐..