居中输入框和图标按钮

Question

我想垂直居中输入框和图标按钮。 我尝试过flexbox justify-content和align-content，但它仍然没有用。 在CSS中我有什么方法可以做到这一点吗？谢谢。

Answer 1

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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