如何垂直对齐标签并选择？

Question

.customer_form label {
  width: 80px;
  margin-right: 15px;
  font-weight: 700;
  font-size: 1em;
}
.selectIcon {
  border-radius: 6px;
  height: 30px;
  background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;
  background-position: 95% 50%;
  display: inline-block;
  width: 250px;
  border: 2px solid #666666;
  overflow: hidden;
}
#topGroup {
  background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;
  background-position: 95% 50%;
  width: 280px;
  border: none;
  margin-top: 5px;
  padding-left: 5px;
  -webkit-appearance: none;
}
#topGroup option {
  padding-left: 5px;
}

<div class="customer_form">
  <label for="topGroup">Category</label>
  <div class="selectIcon">
    <select id="topGroup">
      <option>Item1</option>
      <option>Item2</option>
      <option>Item3</option>
    </select>
  </div>
</div>

我在IE8上使用这个下拉列表,需要使用自定义图标,这就是我隐藏默认下拉箭头图标的原因.

但是,当我隐藏图标时,select的位置会在firefox,chrome中向上移动一点,即

如何使标签和选择具有正确的位置？

Answer 1

vertical-align: middle;在.selectIcon课堂上试试这个

.customer_form label {
  width: 80px;
  margin-right: 15px;
  font-weight: 700;
  font-size: 1em;
}
.selectIcon {
  border-radius: 6px;
  height: 30px;
  background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;
  background-position: 95% 50%;
  display: inline-block;
  width: 250px;
  border: 2px solid #666666;
  overflow: hidden;
  vertical-align: middle; //added
}
#topGroup {
  background: url(../images/00_arrorw_drop_darkgrey.png) no-repeat right;
  background-position: 95% 50%;
  width: 280px;
  border: none;
  margin-top: 5px;
  padding-left: 5px;
  -webkit-appearance: none;
}
#topGroup option {
  padding-left: 5px;
}

<div class="customer_form">
  <label for="topGroup">Category</label>
  <div class="selectIcon">
    <select id="topGroup">
      <option>Item1</option>
      <option>Item2</option>
      <option>Item3</option>
    </select>
  </div>
</div>

Answer 2

只需添加vertical-align: middle;到您.selectIcon的CSS中.