[html] Twitter Bootstrap 3에서 버튼을 가운데에 배치하는 방법은 무엇입니까?

Html / 글쓴이

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의 중심에 정렬하는 데 도움이되었습니다.

센터 블록 클래스를 찾을 수있는 링크를 확인하십시오

http://getbootstrap.com/css/#helper-classes-center