Center-Aligning the Input Element within a Flexbox

Hello i want to ask something related to flexbox cross axis alignment. In the image above, i’m trying to center vertically the input (search) element. What is the best way to do that?

Thanks in advance.

Hi @ricojrico

I’m not quite sure why you posted in the “WebThings” category and not “MDN”. “WebThings” is for IoT devices. You should change the category to MDN. But nevertheless I found your post :wink:

If those elements with yellow borders are flex elements you have two possibilities:

  • Put align-items: center; on the parent (where display: flex is set) to vertically align all of them
  • Put align-self: center; on the flex element itself to vertically align just this item

If this doesn’t work it would be helpful to post the code in codepen.io so I can see the code.

Hope it helps!
Michael

I apologize for the mistake, looks like i’m not reading the sub-category fully. Thank you for the solution, i will try them and report the result later. Once again, i’m sorry for the inconvenience and thanks a lot! @miko