Không thể tập trung div trên bootstrap 3

Tôi không thể tập trung rất nhiều div kể từ khi tôi nâng cấp bootstrap tôi 2,1-3,0Không thể tập trung div trên bootstrap 3

Ví dụ với mã này:

<div id="center" class="container"> 
    <div class="row"> 
     <div class="btn-toolbar"> 
      <div class="btn-group"> 
       <a class="btn btn-default" href="#">test</a> 
      </div> 
     </div> 

     <br /> 

     <p>Am I centered ?</p> 
     <a class="btn btn-default" href="#">Back</a> 
    </div> 

</div>

tôi đã quy tắc này :

#center { 
    margin: 0 auto; 
}

Nhưng kết quả là: enter image description here

O r ví dụ khác, làm thế nào để tập trung này:

<div id="center" class="container"> 
    <div class="row"> 
     <li class="col-md-5"> 
      <ul class="list-unstyled"> 
       <li><i class="icon-user"></i> aaaaaaaaa</li> 
       <li><i class="icon-envelope"></i> bbbbbbbbbb</li> 
       <li><i class="icon-envelopebug"></i> cccccccccccc</li> 
      </ul> 
     </li> 
     <li class="col-md-5"> 
      <ul class="list-unstyled"> 
       <li><i class="icon-user"></i> aaaaaaaaa</li> 
       <li><i class="icon-envelope"></i> bbbbbbbbbb</li> 
       <li><i class="icon-envelopebug"></i> cccccccccccc</li> 
      </ul> 
     </li> 
    </div> 
</div>

enter image description here

Cảm ơn bạn đã giúp đỡ của bạn

Nguồn

2013-09-26 Stéphane J.

Để tập trung một yếu tố mức khối sử dụng margin: 0 auto; nó cũng phải có chiều rộng nhỏ hơn khối chứa nó (cho giá trị auto có ý nghĩa) - vì #container được kéo dài chiều rộng của công ty mẹ của nó (<body>) chỉ đơn giản là không có lề để phân phối.

Cách tiếp cận alernative để margin: 0 auto; sẽ là đặt .btn-toolbar thành inline-block và sau đó căn giữa nó bằng cách thêm text-align: center; vào khối chứa của nó. Bạn có thể áp dụng các khái niệm tương tự như ví dụ thứ hai:

http://fiddle.jshell.net/52VtD/94/

Nguồn

2013-09-26 23:11:50 Adrift

Cảm ơn bạn nó hoạt động tuyệt vời cho các nút nhưng tôi có một câu hỏi với danh sách. Làm thế nào là nó có thể có cùng một kết quả nhưng không có văn bản trung tâm :) http://fiddle.jshell.net/52VtD/99/ –

Trong trường hợp này, margin:0 auto không làm việc vì chiều rộng của nguyên tố này là 100%. Nếu bạn muốn nó để làm việc, bạn sẽ phải thiết lập chiều rộng trên các yếu tố:

.btn-toolbar { 
    width: 50px; 
    margin: 0px auto; 
}

Nếu bạn muốn tập trung các văn bản và các nút, bạn có thể thêm lớp text-center đến các yếu tố phụ huynh, trong trường hợp này : .row. Kiểu dáng của lớp này chỉ đơn giản là text-align: center.

<div class="row text-center"> 
    .. 
</div>

EXAMPLE HERE

Như @Adrift chỉ ra, nó sẽ là hiệu quả hơn để tập trung phần tử bằng cách làm cho nó inline-block, như bạn có thể sử dụng text-align:center như trái ngược với margin:0 auto và tránh được việc phải thiết lập chiều rộng cố định trên phần tử. Điều này sẽ đảm bảo rằng phần tử được căn giữa bất kể chiều rộng của nó. (example here) - đừng quên bạn chỉ có thể thêm lớp text-center cho phụ huynh để căn giữa.

Cũng cần lưu ý rằng các yếu tố inline/inline-block tôn trọng khoảng trắng trong đánh dấu và do đó tạo không gian nếu có. Nếu bạn muốn xóa không gian này, hãy xem this answer.

Nguồn

2013-09-26 23:11:43

Như bạn thấy, tôi theo các giải pháp của @Adrift nhưng cảm ơn bạn đã giải thích;) –

Không thể tập trung div trên bootstrap 3

Trả lời

Các vấn đề liên quan