使用 CSS 将图标与输入框对齐答案

【问题标题】：Align icon with input box with CSS使用 CSS 将图标与输入框对齐
【发布时间】：2018-11-12 10:49:39
【问题描述】：

如您所见，图标与输入框并没有完全对齐：

我只是想让图标与输入框对齐，不能使用position absolute，因为那样输入框会溢出其他内容。

我该怎么做才能使它正确？

header.toplogo {
  overflow: hidden;
  margin-top: 10px;
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr 100px
}

header.toplogo div {
  width: 100%;
  margin: 0 auto;
  line-height: 150px;
  vertical-align: middle;
  grid-column: 2/3;
}

header.toplogo div i {
  background-color: #ff3232;
  padding: 10px 12px 14px 12px;
  border-radius: 5px 0 0 5px;
  color: white;
  font-size: 18px;
  transition: 0.6s;
}

<header class="toplogo" style="direction:ltr">
  <div><i class="fa fa-search"></i><input type="text" name="search" placeholder="Search ..."></div>
</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

【问题讨论】：

输入样式？无论如何，只需在输入上放置与图标相同的填充，并根据输入具有预定义的边框进行调整。

标签： html css vertical-alignment

【解决方案1】：

这是我的解决方案

将此添加到您的 css 中

input {
  box-sizing: border-box;
  height: 42px;

}

并将vertical align:middle 添加到i 标签

header.toplogo {
  overflow: hidden;
  margin-top: 10px;
  position: relative;
  display: grid;
  grid-template-columns: 170px 1fr 100px
}

header.toplogo div {
  width: 100%;
  margin: 0 auto;
  line-height: 150px;
  vertical-align: middle;
  grid-column: 2/3;
}

header.toplogo div i {
  background-color: #ff3232;
  padding: 10px 12px 14px 12px;
  border-radius: 5px 0 0 5px;
  color: white;
  font-size: 18px;
  transition: 0.6s;
  vertical-align: middle;
}

input {
  box-sizing: border-box;
  height: 42px;
 
}

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<header class="toplogo" style="direction:ltr">
  <div><i class="fas fa-search"></i><input type="text" name="search" placeholder="Search ..."></div>
</header>

【讨论】：