부트 스트랩 버튼 중심의 텍스트 4 개 -

Question

매우 간단한 목표를 달성하고 싶습니다. 왼쪽에 텍스트 줄이 있고 오른쪽에 단추가 있습니다. 그리고 텍스트를 버튼의 레이블에 수직으로 맞추기를 원합니다. 나는 패딩, 마진 등을 가지고 플레이하려고 노력했지만 아무런 효과가 없었다. 내가 누락 된 간단하고 똑똑한 해결책이 있다고 나는 믿는다.

Plunker 데모 : 귀하의 답변

https://plnkr.co/edit/KwRF2uOmKc3aPFQW9DXn?p=preview

<div> 
    <span> 
     This text should match the "Submit" text 
    </span> 
    <button type="button" class="btn btn-secondary float-right">Submit</button> 
</div> 

감사합니다.

Answer 1

부트 스트랩 4는 flexbox를 기반으로하므로 이러한 정렬 유틸리티를 적용하기위한 클래스가 이미 있습니다. d-flex은 컨테이너를 플렉스 컨테이너로 만들고 align-items-center은 수직 정렬을 수행합니다. 다음과 같이 시도하십시오.

<div class="d-flex align-items-center"> <span> This text should match the "Submit" text </span> <button type="button" class="btn btn-secondary ml-auto">Submit</button> </div>