将输入元素置于flex容器中

Question

我使用弹性容器放置一个按钮，使其在右边框上与输入相邻。我无法将输入水平居中。如何在不消除display: flex的情况下将其居中？

＆＃13;

＆＃13;

.flexContainer {
  display: flex;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

只需将 justify-content：添加到CSS：

＆＃xA;＆＃xA;

  .flexContainer {＆＃xA; display：flex;＆＃xA;辩解内容：中心;＆＃xA; }＆＃xA;  

＆＃xA;＆＃xA;

小提琴更新

＆＃xA;