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 />标记不能与中间对齐。