フレックスコンテナに入力要素を配置します。

Question

フレックスコンテナを使用してボタンを配置し、右端の入力に接するようにしています。私は入力を水平に中央に置くことができません。 display: flexを削除することなく、どのようにセンターに配置するのですか？ https://jsfiddle.net/wpd3b0kt/1/

Answer 1

だけCSSにjustify-content:を追加します：

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

fiddle update

をここで

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

はフィドルです