[html] Twitter Bootstrap 3에서 버튼을 가운데에 배치하는 방법은 무엇입니까?
Twitter Bootstrap에서 양식을 작성하고 있지만 양식의 입력 아래 버튼을 가운데에 배치하는 데 문제가 있습니다. 이미 center-block
버튼에 클래스를 적용하려고 시도했지만 작동하지 않았습니다. 이 문제를 어떻게 해결해야합니까?
여기 내 코드가 있습니다.
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
답변
“text-center”클래스로 단추를 div로 감 쌉니다.
이것을 변경하십시오 :
<!-- wrong -->
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>
이에:
<!-- correct -->
<div class="col-md-4 text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button>
</div>
편집하다
현재 BootstrapV4 , center-block
떨어졌다 # 19102를 찬성m-*-auto
답변
트위터 부트 스트랩 문서에 따르면 : http://getbootstrap.com/css/#helper-classes-center
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4 center-block">
<button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
Next Step!
</button>
</div>
</div>
모든 클래스 center-block
는 요소에 0 여백을 갖도록 지시하고, 자동은 왼쪽 / 오른쪽 여백입니다. 그러나 클래스 text-center 또는 css text-align : center; 이 부모에 설정되어 있으면 요소가이 자동 계산을 수행 할 지점을 알지 못하므로 예상대로 중앙에 위치하지 않습니다.
https://jsfiddle.net/Seany84/2j9pxt1z/ 위의 코드 예를 참조하십시오.
답변
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button class="btn btn-primary" id="singlebutton"> Next Step!</button>
</div>
</div>
</div>
답변
당신의 스타일에 추가하십시오 :
디스플레이 : 테이블; 여백 : 0 자동;
답변
<div class="container-fluid">
<div class="col-sm-12 text-center">
<button class="btn btn-primary" title="Submit"></button>
<button class="btn btn-warning" title="Cancel"></button>
</div>
</div>
답변
여백을 주거나 해당 요소를 절대적으로 배치하면됩니다.
예를 들어
.button{
margin:0px auto; //it will center them
}
0px는 위와 아래에 있고 auto는 왼쪽과 오른쪽에 있습니다.
답변
다음 코드를 시도해 보았습니다.
<button class="btn btn-default center-block" type="submit">Button</button>
버튼 컨트롤은 div에 있으며 센터 블록 클래스의 부트 스트랩을 사용하여 버튼을 div의 중심에 정렬하는 데 도움이되었습니다.
센터 블록 클래스를 찾을 수있는 링크를 확인하십시오