Tim Tim - 1 month ago 7
CSS Question

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/

Answer

Just add justify-content: to the CSS:

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

fiddle update