CODEWITHSUNDEEP
htmlcssflexboxcentering
Tim
Tim

Reputation: 8921

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/

Upvotes: 2

Views: 5894

Answers (1)

Scott
Scott

Reputation: 21882

Just add justify-content: to the CSS:

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

fiddle update

Upvotes: 5

Related Questions