Centering input box and icon button

debugcn Published at Dev

Lan Mai

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.

ab29007

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-23

Comments

0 comments

From Dev

Related Related

Article

Centering input box and icon button

Centering input box and icon button

Overlay icon on input box

vertical and horizontal centering datalist box with its button

Centering email input and button using Bootstrap

Icon on AngularJS input type button

Centering a button

Centering an icon in SVG

Qt - Centering Icon in QTreeWidgetItem

Qt - Centering Icon in QTreeWidgetItem

Centering icon with text

Bootstrap button icon on type input submit not visible

Font awesome icon and text in input submit button?

How to add Font Awesome icon into <input> button?

Laravel Form: Input Button Not Showing HTML Icon

Bootstrap button icon on type input submit not visible

Flexbox centering in a box

Placing a Input Box over a Button with same width

Submit Button only saves one input box

change style of button on focus of input box

Adding a popover to an input box with a button (angularJS)

How create an input box having a + and - button in Ionic

Submit Button only saves one input box

Append text of the input box on radio button clicked

Add a cancel button to input box VB

Edit button on GridView not updating with input box data

Input box value is showing blank on button click

Using paper-icon-button as input button to submit a form

Using paper-icon-button as input button to submit a form

jQuery Datepicker icon showing below the input box instead of on the right

Clear icon inside input text box angular way