CSSはラベルテキストを選択テキストと整列させます

Question

私は現在、小さな仕事のためにフロントエンドをしなければならないバックエンド開発者です。私の問題は、背景がちょうどデバッグ目的でこの画像

です。しかし、この赤い線は、ラベル（左）のテキストが右のテキストと揃っていないことを示すことです。私が反応使用して、ここでここで両方

<div className='select'> 
    <label className='selectLabel'>{this.props.label}</label> 
    <select id ='select' onChange={this.props.onChange}> 
    {this.props.options} 
    </select> 
</div> 

を作成し、私のコンポーネントでいますと、これまでのところ、私は私がちょうどランダムなものを行うとどんな

.select{ 
    width:100%; 
    padding-left: 2%; 
    text-align: left; 
    margin: 10px auto 10px; 
    position: relative; 
} 
#select{ 
    border: 1px solid #ccc; 
    font-size: 16px; 
    height: 34px; 
    width: 268px; 
    background-color: aqua; 
} 
.selectLabel{ 
    clear: both; 
    float:left; 
    display:block; 
    height: 34px; 
    vertical-align: middle; 
    width: 268px; 
    line-height:25px; 
    background-color: aquamarine; 
} 

何をして作品やって何見当がつかないとしての私のCSSです両方のテキストを互いに整列させるために追加または変更する必要がありますか？

Answer 1

.selectLabelにdisplay: flex; align-items: center;を追加し、ラベルをフロートまたはその高さを定義する必要はありません問題に

.select{ 
 
    width:100%; 
 
    padding-left: 2%; 
 
    text-align: left; 
 
    margin: 10px auto 10px; 
 
    position: relative; 
 
} 
 
#select{ 
 
    border: 1px solid #ccc; 
 
    font-size: 16px; 
 
    height: 34px; 
 
    width: 268px; 
 
    background-color: aqua; 
 
} 
 
.selectLabel{ 
 
    clear: both; 
 
    float:left; 
 
    display:flex; 
 
    align-items: center; 
 
    height: 34px; 
 
    vertical-align: middle; 
 
    width: 268px; 
 
    line-height:25px; 
 
    background-color: aquamarine; 
 
}

<div class='select'> 
 
    <label class='selectLabel'>{this.props.label}</label> 
 
    <select id ='select'> 
 
    <option value="1">1</option> 
 
     <option value="2">2</option> 
 
    </select> 
 
</div>

Answer 2

を解決します。インラインブロックを表示モードとして使用します。ワーキング例えば

.selectLabel{ 
    display:inline-block; 
    background-color: aquamarine; 
} 

を参照してくださいコードペン：https://codepen.io/anon/pen/qXaoGb

Answer 3

利用line-height代わりのvertical-align: middle;

し、代わりにあなたのラベルのdisplay:block; float:left;

のinline-block。

https://jsfiddle.net/r8bzo8c1/1/

.select{ 
 
    width:100%; 
 
    padding-left: 2%; 
 
    text-align: left; 
 
    margin: 10px auto 10px; 
 
    position: relative; 
 
} 
 
#select{ 
 
    border: 1px solid #ccc; 
 
    font-size: 16px; 
 
    height: 34px; 
 
    width: 150px; 
 
    background-color: aqua; 
 
} 
 
.selectLabel{ 
 
    display:inline-block; 
 
    height: 34px; 
 
    width: 150px; 
 
    line-height:34px; 
 
    background-color: aquamarine; 
 
}

<div className='select'> 
 
    <label class='selectLabel'>Label</label><select id ='select'> 
 
    <option>A</option> 
 
    <option>B</option> 
 
    </select> 
 
</div>