Twitter Bootstrap 3에서 버튼을 가운데에 맞추는 방법은 무엇입니까?

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>

---

<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>

---

당신의 스타일에 추가하십시오 :

디스플레이 : 테이블; 여백 : 0 자동;

---

여백을 주거나 해당 요소를 절대적으로 배치하면됩니다.

예를 들어

.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

---

text-align: centerCSS 속성 사용

---

부트 스트랩 4 업데이트 :

'd-flex'및 'justify-content-center'유틸리티 클래스로 div 세트로 버튼을 감싸면 flexbox를 활용할 수 있습니다.

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

flexbox를 사용하면 동일한 축에 별도의 정렬로 요소 / 버튼을 추가 할 수 있다는 이점이 있습니다. 또한 'align-items-start / center / end'클래스와의 수직 정렬 가능성을 열어줍니다.

레이블과 버튼을 다른 div로 감싸서 서로 정렬되도록 할 수 있습니다.

예 : https://codepen.io/anon/pen/BJoeRY?editors=1000

---

다음을 수행 할 수 있습니다. 또한 버튼이 겹치지 않도록합니다.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

---

그것은 독립적으로 만들고 <div>그 안에 넣는 것을 button시도합니다. 이처럼 :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

그런 다음 CSS스타일 페이지로 이동하여 다음 과 Text-align:center같이하십시오.

#contactBtn{text-align: center;}

---

부트 스트랩 3

공간을 열로 나누고 8 개의 작은 열 (col-xs-8)을 사용하고 4 개의 빈 열 (col-xs-offset-4)을 남겨두고 속성 (가운데 블록)을 적용합니다

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

부트 스트랩 4

우리는 Spacing을 사용합니다. Bootstrap은 요소의 모양을 수정하기 위해 다양한 약식 및 패딩 된 응답 마진 유틸리티 클래스를 포함합니다. xs의 경우 {property} {sides}-{size} 형식, sm, md, lg 및 xl의 경우 {property} {sides}-{breakpoint}-{size} 형식으로 클래스 이름이 지정됩니다.

자세한 정보는 여기 : https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

---

나는이 문제가 있었다. 나는 사용했다

<div class = "col-xs-8 text-center">

몇 개의 h3 줄, 몇 개의 h4 줄 및 부트 스트랩 버튼이 포함 된 div에서. 텍스트 센터를 사용한 후 버튼 이외의 모든 것이 중앙으로 이동하여 Bootstrap을 재정의하는 CSS 시트로 이동하여 버튼에

margin: auto;

문제를 해결 한 것 같습니다.

---

또는 부트 스트랩 그리드 시스템으로 원하는 위치에 버튼 위치를 만들기 위해 특정 오프셋을 지정할 수 있습니다.

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

이 방법으로 btn-block을 설정 한 경우 버튼 크기를 지정할 수도 있습니다. 물론 이것은 md 크기 범위에서만 작동합니다. 다른 크기도 설정하려면 xs, sm, lg를 사용하십시오.

참고 URL : https://stackoverflow.com/questions/22578853/how-to-center-buttons-in-twitter-bootstrap-3