居中输入框和图标按钮答案

【问题标题】：Centering input box and icon button居中输入框和图标按钮
【发布时间】：2017-05-22 00:30:11
【问题描述】：

我想将输入框和图标按钮都垂直居中。我尝试了 flexbox justify-content 和 align-content ，但它仍然无法正常工作。在 css 中有什么方法可以做到这一点吗？谢谢。

【问题讨论】：

你的 HTML 是什么？
分享你的html

标签： css input icons center

【解决方案1】：

你必须用一个包含display:flex; 的容器 div 来包装它们。使用flex-direction 属性总是好的，在您的情况下是row。

然后使用align-item:center; 垂直对齐项目。如果您还希望它们水平居中，请在下面的示例中将 justify-content:center; 添加到 .container 的 css 中。

我在输入框旁边使用了一个图像和一个很棒的字体图标作为搜索图标，因为你没有在问题中提到你使用的是哪个。

.container{
  display:flex;
  flex-direction:row;
  align-items:center;
}
.container input{
  line-height:80px;
  margin:0 5px;
}
.container img{
  height:50px;
  margin:0 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
  <input type="text" placeholder="Search"/>
  <i class="fa fa-search"></i>
  <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg">
</div>

【讨论】：

@Lan Mai 如果能解决您的问题，请接受我的回答。您知道单击我的答案左侧的复选框。谢谢。
Jezz... 你的回答太好了！我确实勾选了这个框：）非常非常非常感谢@kittyCat！
@兰麦谢谢你:)

【解决方案2】：

在输入框和图标按钮的父元素中，添加属性line-height并将其值设置为等于输入框和图标按钮的父元素的高度。

示例：如果它们都在一个 div 内并且该 div 的高度为 40px，则将属性 line-height 添加到该 div 并将其设置为 40px。

【讨论】：

不错的方法！非常感谢:)