플렉스 컨테이너에 입력 요소를 가운데에 배치하십시오.

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>

는 바이올린의