对齐图标 class

Question

如图所示。图标高高在上。我似乎尝试的任何边距或填充都会将文本框向下移动。由于它的位置非常高，它也将搜索文本推高了。关于如何修复有什么建议吗？

我只希望搜索图标与搜索框具有相同的高度，而不是与标签文本混淆。

.icon-btn {
  padding: 0;
  margin: 0;
  display: inline-block;
  height: 26px;
}
.icon-magnifier-dark:before {
  background-color: white;
  border: solid;
  content: "\e035";
  color: @color-light;

font-family: outlinedFont;
  font-style: normal !important;
  font-size: 20px;
  line-height: 1;
  box-sizing: border-box;
}

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
  <label for="Search" style="">Search</label>

  <input type="text" name="Search" id="Search" size="10" style="" />
  <a class="icon-btn" href="#" style="">
    <i class="icon-magnifier-dark" style=""></i>
  </a>
</div>

Answer 1

改变font-size

font-family: outlinedFont;
  font-style: normal !important;
  font-size: 15px;
  line-height: 1;
  box-sizing: border-box;
}

Answer 2

你让它变得如此困难。请检查下面的代码...

HTML:

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
  <label for="Search" style="">Search</label>

  <input type="text" name="Search" id="Search" size="10" style="" />
  <a class="icon-btn" href="#" style="">
    <i class="icon-magnifier-dark" style=""></i>
  </a>
</div>

Css:

.icon-btn {
     display: inline-block;
    width: 26px;
    height: 26px;
    background-color: red;
    text-align: center;
    padding:5px;
    padding: 3px;
    box-sizing: border-box;
}
.icon-magnifier-dark:before {
   content: "\e035";
   font-family: outlinedFont;
   font-style: normal;
}

input[type="text"]{
    width:150px;
    height:26px;
    vertical-align:top;
    box-sizing: border-box;
    margin-right: -5px;
}

查看 jsfiddle

上的演示

Answer 3

我认为其他一些 CSS 可能会覆盖或更改对齐方式，因此您应该检查一次完整的 CSS。我检查了您在对其中一个答案的评论中提供的 JSFiddle，我看到 Fiddle.

中的对齐正常

对齐图标 class

Aligning icon class

css

glyphicons