将 input 元素置于 flex 容器的中心

Question

我正在使用 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>

这是 fiddle：https://jsfiddle.net/wpd3b0kt/1/

Answer 1

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

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

fiddle update

将 input 元素置于 flex 容器的中心

center an input element in a flex container

html

css

centering

flexbox