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

时间:2015-08-24 08:14:50

标签: html css

.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中稍微向上移动,即

如何制作标签并选择正确的位置?

3 个答案:

答案 0 :(得分:5)

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>

答案 1 :(得分:5)

只需将vertical-align: middle;添加到css。{/ p>中的.selectIcon即可

答案 2 :(得分:2)

您可以在标签上添加line-height:34px(与select的高度相同)。要使其工作,您还需要添加float:left和display:inline-block;

.customer_form label {
  width: 80px;
  margin-right:15px;
  font-weight: 700;
  font-size: 1em;
  float: left;
  line-height: 34px; 
  display: inline-block;
}


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