css - 对齐图标类

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

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