Search code examples
htmlcssflexboxcentering

center an input element in a flex container

I'm using a flex container to place a button so that it abuts an input on its right border. I can't get the input to be horizontally centered. How to center it, without eliminating the display: flex?

.flexContainer {
  display: flex;
}
<div style="text-align:center">
  <div>Enter the search term</div>
  <div style="text-align: center">
    <div class="flexContainer">
      <input id="abc" />
      <button id="search" name="search" type="submit">go</button>
    </div>
  </div>
</div>

Here's the fiddle: https://jsfiddle.net/wpd3b0kt/1/

Solution

  • Just add justify-content: to the CSS:

     .flexContainer {
        display: flex;
        justify-content: center;
  }

    fiddle update