Search code examples
cssinputiconscenter

Centering input box and icon button

I want to center vertically both of the input box and the icon button. I tried flexbox justify-content and align-content and it still not working. Is there any way in css that i can do this? Thank you.

Solution

  • You have to wrap them with a container div which will have display:flex;. It is always good to use flex-direction property, in your case that would be row.

    Then to align the items vertically use align-item:center;. And if you want them to be horizontally centered as well then add justify-content:center; to the css of .container in the example below.

    I have used an image as well as a font-awesome icon for search-icon alongside the input box, Since you have not mentioned in the question which one you are using.

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