Làm thế nào để căn giữa một nút không xác định chiều rộng trong một khoảng của bootstrap?

Question

Tôi có một nút được tạo bởi backbone.js và jQuery.tmpl() và chiều rộng của nút là biến thể. Tôi muốn đặt nó trong một div6 span6. Mã được hiển thị bên dưới:

<div class="row"> 
    <div class="span6"> 
    <button class="btn primary large"> 
     BLABLABLA 
    </button> 
    </div> 
    <div class="span10"> 
    ... 
    </div> 
</div> 

Tôi không biết cách làm cho nút được căn giữa trong div.

Answer 1

Im không CSS guru nhưng điều này làm các trick cho tôi (tập trung vào nút trong span6):

<div class="row"> 
    <div class="span6" style="text-align:center"> 
    <button class="btn primary large"> 
     BLABLABLA 
    </button> 
    </div> 
</div> 

Thông tin thêm về trung can be found here.

Answer 2

Một hơi muộn nhưng bạn có thể sử dụng lớp pagination làm trung tâm từ bootstrap

<div class="span6 pagination-centered"> 
    <button class="btn primary large"> 
    BLABLABLA 
    </button> 
</div> 

Answer 3

gì về <a> thẻ?

Nếu bạn có nút thẻ <a> thì các cách tiếp cận khác sẽ không hoạt động vì a.btn có thuộc tính float: left trong nguồn khởi động.

<div style="text-align: center;"> 
    <a href="#" class="btn">Button text</a> 
</div> 

Điều này có thể được hoàn tác theo 2 cách.

Giải pháp 1

Thêm tệp tùy chỉnh và nhập bootstrap.

bootstrap-custom.less

@import "bootstrap.less"; 
a.btn { 
    float: none !important; 
} 

Và sau đó biên dịch tùy chỉnh của bạn ít tập tin, hoặc đơn giản là xác định nó trong một file CSS:

styles.css

a.btn { 
    float: none !important; 
} 

Giải pháp 2

Đơn giản chỉ cần làm điều đó inline sử dụng style="float: none;":

<div style="text-align: center;"> 
    <a href="#" class="btn" style="float: none;">Button text</a> 
</div> 

Answer 4

Giải pháp khác

<div class="row-fluid pagination-centered"> 
<a href="#" class="btn btn-large">Button</a> 
    </div> 
<div class="clearfix"></div> 

Answer 5

Tôi có vấn đề này đó, tôi quấn trong

<a class="btn btn-primary" href="#" role="button">Text Here</a> 

Trở thành

<div class="text-center"> 
<a class="btn btn-primary" href="#" role="button">Text Here</a> 
</div>