如何在 Next.js 应用程序中将输入框与图像对齐

如何解决如何在 Next.js 应用程序中将输入框与图像对齐

我想将输入框与右侧的图像沿其中心水平对齐，但输入框始终向下偏移。这些元素位于导航栏中。

我尝试将 CSS 属性应用于 .leftel 类，包括 vertical align: center; 并更改 line-height。然而，产量并未受到影响。我也试过修改输入的内边距、边框和边距。

它是这样显示的：navigation bar image

在导航栏组件中，

<div className="leftel">
  <Link href="/">
    <a><Image src="/logo.png" width={78} height={35}/></a>
  </Link>  
  <input className="searchBar" placeholder="Search here..."/>
</div>

这是每个类的 CSS：

.leftel{
  float: left;
}

.leftel Image,.leftel input{
  vertical-align: middle;
}

.searchBar {
  margin-left: 10px;
  padding: 7px;
  border-radius: 30px;
  border: none;
  width: 600px;
  height: 20px;
  font-size: 16px;
  text-align: flex-end;
  background-color: #3A4466;
  font-family: "Nunito";
}