부트스트랩 버튼 가운데정렬

부트스트랩 버튼 가운데정렬

QA

부트스트랩 버튼 가운데정렬

본문

안녕하세요

 


	<div class="col-sm-3">
		<button class="btn btn-primary btn-block" type="button">제출</button>
	</div>

 

위와 같이 col-sm-3로 가로길이를 지정하고 

본문에 버튼을 삽입했는데 어떻게해야 버튼을 가운데정렬 할 수 있는지 모르겠네요...

 

혹시 부트스트랩 버튼 가운데정렬 방법 아시는분 알려주신다면 감사하겠습니다!

이 질문에 댓글 쓰기 :

답변 2

아미나 경우엔 아래처럼 text-center 라는 클래스 넣으면 되었는데,

 


<div class="col-sm-3 text-center">
	<button class="btn btn-primary btn-block" type="button">제출</button>
</div>

 

혹, 작동 안 되면, 아래처럼 하시면 될 거에요.

 

<div class="col-sm-3" style="text-align:center;">
	<button class="btn btn-primary btn-block" type="button">제출</button>
</div>

감사합니다 홈짱님.

이게 버튼만 있을땐 괜찮은데 부트스트랩 설정때문에 head부분에


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

를 넣으면 가운데정렬이 안됩니다

!important 붙인 후 작성할때는 적용되는데 확인누르니 결국 다시 좌측으로 가버리네요 ㅠ

 

작성전

1d1bce395975ba90e1f183d400ab87e8_1477817818_7663.png
 

작성후

1d1bce395975ba90e1f183d400ab87e8_1477817818_7949.png
 

에디터로 코드 넣어 작성하는 거 말씀하신 거였나요? ㅡㅡ;

에디터로 코드 넣어 확인 버튼 누르면,
서버로 전송하면서 불필요한 코드는 다 짜르고 전송하는 것 같더라구요.

이 코드 말고, 다른 코드도....이런 비슷한 증상이 있어 편리 님께 문의했었는데...
어쩔 수 없단 답변만 받았었습니다.

text-align 속성은 인라인 요소를 가운데 정렬시킬 때 사용해요.
만약, 안에 있는 요소가 블럭 요소이면 적용되지 않습니다.


안에 있는 요소가 블럭요소일 땐, 블럭 요소에 너비 값 준 후, margin:0 auto 형식으로 하셔야 됩니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 154
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT