[BootStrap] 부트스트랩 버튼 가운데 정렬하기 / div 가운데 정렬

 

BootStrap을 이용한 html 에서 버튼 가운데로 만들기

 

 

BootStrap 부트스트랩을 이용해서 Modal 구현 도중, Modal 의 footer 버튼을 가운데로 정렬 하고 싶었다.

 

부트스트랩의 모달에서는 닫기 등 기본 버튼의 배치가 우측 하단으로 되어있어서 이부분을 수정하려고 한다.

 

 

 

 

---

 

기본 우측으로 정렬되어있는 코드

 

<div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">닫기</button>
    <button type="button" class="btn btn-outline-primary">아이디 찾기</button>
</div>

 

 

 

 

---

 

 

구글링 후, 그저 class에 text-center를 추가해주면 된다고 했다. 따라했다.

 

class에 text-center를 추가한 코드

 

<div class="modal-footer text-center">
    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">닫기</button>
    <button type="button" class="btn btn-outline-primary">아이디 찾기</button>
</div>

 

변함이 없다.

 

 

 

---

 

 

더 찾아보니, text-center를 class에 적용 했을 때 바뀌지 않는다면 style로 속성을 줘서 정렬 가능하다고 한다.

style="text-align : center"를 추가하라고 한다. 추가했다.

 

style에 text-align : center를 추가한 코드

 

<div class="modal-footer" style="text-align: center">
    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">닫기</button>
    <button type="button" class="btn btn-outline-primary">아이디 찾기</button>
</div>

 

변함이 없다.

 

 

 

 

---

 

(더 찾다 보니, !important를 style속성에 넣네 마네 하던데 그런걸로 해결되지 않았으니 생략하도록 하자)

 

---

 

 

더 찾다 보니, class에 justify-content-center를 추가하면 된다고 한다. 추가했다.

 

 

class에 justify-content-center 를 추가한 코드

 

<div class="modal-footer justify-content-center" style="text-align: center">
    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">닫기</button>
    <button type="button" class="btn btn-outline-primary">아이디 찾기</button>
</div>

 

눈물의 시도 끝에 성공이다.

 

 

 

---

 

 

요약 

- class에 text-center를 추가해보자 => 실패!

- style="text-align : center"를 추가 => 실패!

- class에 justify-content-center를 추가 => !성공!