CSS使标签文本与选择文本对齐

Question

我是后端开发人员，他目前必须做一个小任务的前端。我的问题是这张图片

背景仅用于调试目的。但是，此红线表示标签中的文本（左侧）未与右侧的文本对齐。我正在使用React，这是我创建两者的组件

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

这是我的css，因为我不知道我在做什么我只做随机的东西和任何工作

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

为了使两个文本相互对齐，我应该添加或更改哪些内容？

Answer 1

将display: flex; align-items: center;添加到.selectLabel将解决问题

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

无需浮动标签或定义其高度。使用内联块作为它的显示模式。

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

有关工作示例，请参阅代码笔：https://codepen.io/anon/pen/qXaoGb

Answer 3

使用public static Model getData(String userId) { return new Select().from(Model.class).where("userId=?", userId).executeSingle(); }代替return new select("coloumnName").from(Model.class).where("userId=?", userId).executeSingle();

和line-height代替vertical-align: middle;

标签。

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

＆＃13;

＆＃13;

inline-block

＆＃13;

display:block; float:left;

＆＃13;

＆＃13;

＆＃13;