【망비록】【CSS】【Bootstrap4】복수의 버튼을 중앙 맞추기

쓴 이유

폼의 디자인시에 수평 줄의 복수의 버튼을 배치할 때, 이하와 같은 이미지로, 복수의 버튼을 버튼 그룹으로 하고 싶지는 않지만, 정리해 중앙 맞춤으로 하고 싶어졌다.

빨리 갈 수 있을까 생각했지만, 의외로 고민했기 때문에 잊지 않도록 써 두기로 했다.

결론

See the Pen Bootstrap4: Centering buttons not Button-Group by Yui Nishimura ( @yui728 )
on CodePen.

해설

20행: <div class="form-group row justify-content-center">

• form-group : 양식의 요소 그룹화
• row : 그리드 레이아웃의 행
• justify-content-center : flexbox 레이아웃에서 컨테이너 내부의 요소를 가운데에 맞추기

21행: <div>

• 위에서 언급 한 justify-content-center에서 중앙 정렬 요소

22행, 23행: <input type="submit"... /> , <input type="button"... />

• 가운데 맞춤 버튼

왜 <div class="form-group row justify-content-center"> 바로 아래에서 <div> 로 또 한 단계 정리해야 하는가?

공식 문서의 Flex: Justify content 를 보면(듯이), justify-content-center 로 중앙 정렬로 했을 경우는, 바로 아래 컨테이너간의 margin 가 무시되기 (위해)때문에.

CodePen으로 실험하면, 확실히 2개의 버튼끼리가 붙은 상태가 된다.

See the Pen Bootstrap4: Centering buttons not Button-Group: if Div directly below Div with "row justify-content-center" class attribute is nothing by Yui Nishimura ( @yui728 )
on CodePen.

<script async=""src="https://production-assets.codepen.io/assets/embed/ei.js"/>