twitter-bootstrap에서 .btn-group을 센터링하는 방법은 무엇입니까?

twitter-bootstrap에서 .btn-group을 센터링하는 방법은 무엇입니까?

---

나는 twitter-bootstrap 을 사용하고 div외형 클래스 .btn-group( link ) 를 가진 센터 가 상당히 어렵다는 것을 알았습니다 . 일반적으로 나는

margin: 0 auto; 

또는

text-align: center;

div 내에서 항목을 중앙에 배치하지만 내부 요소 float: left에이 경우 시각에 사용되는 속성 이 있으면 작동하지 않습니다 .

http://jsfiddle.net/EVmwe/1

---

편집 됨 : 이것은 부트 검증 3에서 변경되었습니다. 아래 부트 유효성 3에 대한 솔루션을 참조하십시오.

질문에서 래핑 div를 추가하고 있습니까?

이 예를 사용 : http://jsfiddle.net/EVmwe/4/

코드의 중요한 부분 :

/* a wrapper for the paginatior */
.btn-group-wrap {
    text-align: center;
}

div.btn-group {
    margin: 0 auto; 
    text-align: center;
    width: inherit;
    display: inline-block;
}

a {
    float: left;   
}

디비전 내에서 버튼 그룹을 래핑하고 div를 텍스트 정렬 중앙으로 설정합니다. 인라인 블록을 표시하고 너비를 선택 버튼 그룹도 사용합니다.

@Andres Ilich가 말했듯이 앵커 앰퍼를 인라인 블록으로 사용하고 float : none도 작동 할 것입니다.

---

부트 유효성 3 업데이트

Bootstrap 3부터는 정렬 클래스가 있습니다 ( 문서 에서 볼 수 있음 ). 이제 text-center클래스를 부모 에게 추가하기 만하면 됩니다. 이렇게 :

<div class="text-center">
    <ul class="pagination">
      <li class="disabled"><a href="#">&laquo;</a></li>
      <li class="active"><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">&raquo;</a></li>
    </ul>
</div>

여기에서 작업 예제를 참조하십시오 : http://jsfiddle.net/EVmwe/409/

---

이것은 나를 위해 작동합니다 (Bootstrap 3).

<div class="text-center">
   <div class="btn-group">
      <a href=1 class="btn btn-small">1</a>
      <a href=1 class="btn btn-small">2</a>
      <a href=1 class="btn btn-small">3</a>
   </div>
</div>

---

또는 "페이지 매김 중심"추가, 예 :

<div class="btn-toolbar pagination-centered">
  <div class="btn-group">
    <a href=1 class="btn btn-small">1</a>
    <a href=1 class="btn btn-small">2</a>
    <a href=1 class="btn btn-small">3</a>
  </div>
</div>

---

부트 유효 성분 4 용

<div class="text-center">
    <div class="btn-group">
        <a href="#" class="btn btn-primary">text 1</a>
        <a href="#" class="btn btn-outline-primary">text 2</a>
    </div>
</div>

---

inline-block대신 버튼 링크를 선언하면 다음 float:left과 같이 text-align:center선언이 작동합니다.

.btn-group a {
    display:inline-block;
}

스템 : http://jsfiddle.net/EVmwe/3/

---

Twitter Bootstrap 3 이후에는 해결 방법이 필요하지 않습니다. text-align: center상위 요소에 대해 지정하십시오 .

---

누군가가 .btn-group의 너비를 변경하려는 경우 너비가 아닌 최소 너비를 수행 할 수 있습니다. 저는 이것을 했어요:

HTML :

<div class="text-center">
<div class="btn-group">
    <button class="btn">1</button>
    <button class="btn">2</button>
</div>
</div>

CSS :

.btn-group {min-width: 90%;}
.btn {width: 50%;}

btn-group 너비를 텍스트 중심의 90 %로 설정하고 포함 된 각 버튼은 버튼 그룹의 50 % (텍스트 중심 div의 45 %)입니다.

---

다음 솔루션을 사용하고 있습니다.

<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 class="btn-group mx-auto" role="group">
    <a href="#" class="btn btn-outline-primary"> Button 1</a>
    <a href="#" class="btn btn-outline-primary"> Button 2</a>
</div>

---

Bootstrap 3에서는 다음과 같이 간단하게 구성하면됩니다.

    <div class="btn-toolbar">
        <div class="btn-group">
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 1                                     
            </button>           
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 2
            </button>
            <button onclick="#" class="btn btn-default btn-sm" type="button">                                               
                Click 3
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 4
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 5
            </button>
            <button onclick="#" type="button" class="btn btn-default btn-sm">
                Click 6
            </button>
        </div>
    </div

그리고 여백이나 텍스트 중심으로 강제 할 수 없도록 강제로 부동을 강제하는이 스타일 만 수정 (부트 스트랩 재정의)합니다.

.btn-toolbar .btn-group {float:initial;}

이것은 큰 변화없이 나를 위해 작동합니다.

---

btn-group을 ap 태그에 넣고 p {}에 text-align : center 스타일을 사용합니다.

    p {
    text-align: center;
    }

    <p>
    <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
    </div>
    </p>

---

이것은 Bootstrap v3.3에서 나를 위해 트릭을했습니다.

.btn-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

참고 URL : https://stackoverflow.com/questions/9853815/how-to-center-btn-group-from-twitter-bootstrap