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 -->
...真ん中に整列することができない、あなたは、行の高さを試みることができる：11pxにも。 – ilwcss
ええ、ちょうど選択高さと同じ値にラインの高さを設定する –