对齐图标类

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

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

Answer 2

更改font-size

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

Answer 3

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

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

上的演示