Twitter Bootstrap 3에서 버튼을 중앙에 배치하는 방법은?

Twitter Bootstrap 3에서 버튼을 중앙에 배치하는 방법은?

Twitter Bootstrap에서 양식을 작성하고 있지만 양식의 입력 아래에 있는 버튼의 중심을 맞추는 데 문제가 있습니다.▁the▁applying다▁tried니를 적용해 보았습니다.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>

편집

부트스트랩 V4 기준으로center-block을 위해 #19102에서 떨어졌습니다.m-*-auto

Twitter Bootstrap 문서에 따르면: http://getbootstrap.com/css/ #bootstrap-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 auto의 여백을 지정하고 자동은 왼쪽/오른쪽 여백을 지정합니다.그러나 클래스 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 
}

0단계는 위와 아래에서, auto는 왼쪽과 오른쪽에서 시작합니다.

저는 다음 코드를 시도했고 그것은 저에게 효과가 있었습니다.

<button class="btn btn-default center-block" type="submit">Button</button>

버튼 컨트롤은 div에 있으며 부트스트랩의 center-block 클래스를 사용하여 div의 center에 버튼을 정렬하는 데 도움이 되었습니다.

센터 블록 클래스가 있는 링크를 확인합니다.

http://getbootstrap.com/css/ #http-sship-center

사용하다text-align: center 속성 css 성

부트스트랩 4에 대한 업데이트:

flexbox를 활용하려면 'd-flex' 및 'justify-content-center' 유틸리티 클래스가 포함된 div 세트로 버튼을 감싼다.

<!-- 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' 클래스와의 수직 정렬 가능성도 열어줍니다.

레이블과 버튼을 다른 디브로 감싸서 서로 정렬 상태를 유지할 수 있습니다.

예: 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-col-col-col-col-col-col-col-4)을 사용하며, 4개의 빈 열(col-col-col-col-col-4)을 남기고 속성(center-block)을 적용합니다.

<!--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.텍스트 센터를 사용한 후 버튼을 제외한 모든 것이 중앙으로 점프하여 부트스트랩을 무시하는 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