將輸入元素放在flex容器中

Question

我正在使用一個flex容器放置一個按鈕，以便它在其右邊框上鄰接輸入。 我無法使輸入水平居中。 如何在不消除display: flex情況下居中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> 

這是小提琴： https : //jsfiddle.net/wpd3b0kt/1/

Answer 1

只需將justify-content:添加到CSS：

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

小提琴更新