Làm cách nào để tôi căn giữa phần tử span trong div

Question

Tôi đang cố gắng căn giữa trang web xem của hai liên kết 'và' xem dự án 'bên trong div xung quanh. Ai đó có thể chỉ ra những gì tôi cần làm để thực hiện công việc này?

JS Fiddle: http://jsfiddle.net/F6R9C/

HTML

<div> 
    <span> 
    <a href="#" target="_blank">Visit website</a> 
    <a href="#">View project</a> 
    </span> 
</div> 

CSS

div { background:red;overflow:hidden } 

span a { 
    background:#222; 
    color:#fff; 
    display:block; 
    float:left; 
    margin:10px 10px 0 0; 
    padding:5px 10px 
} 

Answer 1

Một lựa chọn là để cung cấp cho các <a> một màn hình của inline-block và sau đó áp dụng text-align: center; trên khối chứa (loại bỏ các nổi lên):

div { 
    background: red; 
    overflow: hidden; 
    text-align: center; 
} 

span a { 
    background: #222; 
    color: #fff; 
    display: inline-block; 
    /* float:left; remove */ 
    margin: 10px 10px 0 0; 
    padding: 5px 10px 
} 

http://jsfiddle.net/Adrift/cePe3/

Answer 2

nhịp có thể nhận được một chút khó khăn để giải quyết. nếu bạn đặt chiều rộng của khoảng dạy, bạn có thể sử dụng

margin: 0 auto; 

để căn giữa chúng, nhưng sau đó chúng kết thúc trên các dòng khác nhau. Tôi sẽ đề nghị thử một cách tiếp cận khác với cấu trúc của bạn.

Đây là jsfiddle tôi CAM e lên với ra khỏi đỉnh đầu của tôi: jsFiddle

EDIT:

câu trả lời Adrift là giải pháp đơn giản nhất :)

Answer 3

Tôi giả sử bạn muốn tập trung họ trên một dòng và không phải trên hai dòng riêng biệt dựa trên fiddle của bạn. Nếu đúng như vậy, hãy thử các css sau:

div { background:red; 
     overflow:hidden; 
} 
span { display:block; 
     margin:0 auto; 
     width:200px; 
} 
span a { padding:5px 10px; 
     color:#fff; 
     background:#222; 
} 

tôi loại bỏ các phao kể từ khi bạn muốn căn giữa, và sau đó thực hiện khoảng xung quanh các liên kết trung tâm do lợi nhuận thêm: 0 auto cho họ. Cuối cùng, tôi đã thêm chiều rộng tĩnh vào khoảng. Điều này tập trung các liên kết trên một dòng trong div màu đỏ.

Answer 4

tùy chọn khác sẽ được cung cấp cho khoảng display:table; và tập trung nó qua margin:0 auto;

span { 
display:table; 
margin:0 auto; 
} 

Answer 5

<div style="text-align:center"> 
    <span>Short text</span><br /> 
    <span>This is long text</span> 
</div> 

Answer 6

Áp dụng 'inline-block' đến yếu tố đó phải được làm trung tâm và áp dụng text-align: center để khối cha mẹ đã làm thủ thuật cho tôi.

Hoạt động ngay cả trên <span> thẻ.