CSS Marke Etikett Text mit Auswahl Text

Question

Ich bin Back-End-Dev, die derzeit Front-End für eine kleine Aufgabe tun muss. Mein Problem ist, dieses Bild

Der Hintergrund ist nur für Debugging-Zwecke. Diese rote Linie soll jedoch zeigen, dass der Text in der Beschriftung (links) nicht mit dem Text auf der rechten Seite übereinstimmt. Ich reagiere bin mit und hier ist meine Komponente, die sowohl erstellt

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

Hier ist meine CSS ist so weit ich keine Ahnung, was ich tue, ich random stuff gerade tun und was auch immer funktioniert

.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; 
} 

Was Soll ich hinzufügen oder ändern, damit beide Texte miteinander in Einklang gebracht werden?

Answer 1

hinzufügen display: flex; align-items: center;-.selectLabel wird das Problem

.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

Es gibt keine Notwendigkeit, lösen Sie das Etikett oder definieren ihre Höhe zu schweben. Verwenden Sie den Inline-Block als Anzeigemodus.

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

Siehe Code Stift für ein funktionierendes Beispiel: https://codepen.io/anon/pen/qXaoGb

Answer 3

Verwenden line-height statt vertical-align: middle;

und inline-block statt display:block; float:left;

für das Etikett.

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>