CSS: Tôi không thể đặt một nút ở giữa một yếu tố DIV

Question

Tôi đang sử dụng các nút CSS từ hướng dẫn này:

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

tôi cần phải đặt một nút ở giữa một DIV vì vậy nó tập trung. Nhưng tôi không thể!

Dưới đây là đoạn code của nút:

<a class="button" href="#"><span>Bring world peace</span></a> 

Và đây là CSS:

.clear { /* generic container (i.e. div) for floating buttons */ 
    overflow: hidden; 
    width: 100%; 
} 

a.button { 
    background: transparent url('bg_button_a.gif') no-repeat scroll top right; 
    color: #444; 
    display: block; 
    float: left; 
    font: normal 12px arial, sans-serif; 
    height: 24px; 
    margin-right: 6px; 
    padding-right: 18px; /* sliding doors padding */ 
    text-decoration: none; 
} 

a.button span { 
    background: transparent url('bg_button_span.gif') no-repeat; 
    display: block; 
    line-height: 14px; 
    padding: 5px 0 5px 18px; 
} 

Dưới đây là đoạn code tôi đang cố gắng để sử dụng:

<div align="center"><a class="button" href="#"><span>Bring world peace</span></a></div> 

Answer 1

thuộc tính align cho phần tử div bị phản đối. Bạn nên xác định một lớp cho div rằng, giống như vậy:

<div class="centerize"> 
    <a class="button" href="#"><span>Bring world peace</span></a> 
</div> 

Và CSS: Tuy nhiên

.centerize { 
    text-align: center; 
} 

Lưu ý rằng thiết lập text-align sẽ chỉ ảnh hưởng đến nội dung bên trong div. Bản thân div (nên là) một phần tử khối, và tùy thuộc vào vị trí của nó trong cấu trúc tài liệu, có thể không phải là chính nó.

Chỉ cần làm một chút chắc chắn hơn, bạn có thể làm một cái gì đó như thế này:

.centerize { 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
} 

Bây giờ bạn có thể áp dụng centerize đến bất kỳ yếu tố, và yếu tố đó phải mất đến chiều rộng toàn bộ trình duyệt và trung sắp xếp của nó Nội dung.

Answer 2

Các a.button được lưu hành Qua bên trái. Bạn có thể thử float: none; trên phần tử đó. margin: 0 auto; cũng hữu ích cho các yếu tố căn giữa.

Điều đó có hữu ích không?

Answer 3

Sửa đổi các lớp nút cho các thuộc tính:

.button{ 
    margin-left:50%; 
    margin-right:50%; 
    position: relative; 
} 

Và quấn liên kết của bạn trong div như thế này:

<div align="center"> 
    <a class="button" href="#"><span>Bring world peace</span></a> 
</div>