Làm cách nào để căn giữa theo chiều ngang một phần tử span bên trong một div

123

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

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
}

css

— J82
nguồn

Liên quan: stackoverflow.com/questions/7886460/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

Dưới đây là hai phương pháp đơn giản để các yếu tố trung tâm trong vòng một div, theo chiều dọc, chiều ngang hoặc cả hai (CSS tinh khiết): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

134

Một tùy chọn là cung cấp cho <a>màn hình hiển thị inline-blockvà sau đó áp dụng text-align: center;trên khối chứa (loại bỏ cả float):

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/

— xa rời
nguồn

1

Đây là một mẹo nhỏ đối với tôi trong một chủ đề phức tạp vừa phải mà tôi cần phải hack một chút. Liên kết tới JSFiddle cao hơn thật tuyệt vời để cho phép tôi kiểm tra. Tôi đã chỉnh sửa mục nhập này để bao gồm thay đổi "tràn: ẩn" thành "tràn: ẩn;"

— đã vẽ ..

1

Trông giống như một dung dịch rất sạch.

— Jim Aho

Hãy xem câu trả lời của Ahmed Bahtity dưới đây, style = "text-align: center", nó ngắn gọn hơn rất nhiều.

— Wallace Howery

142

một tùy chọn khác sẽ là cung cấp khoảng display:table;và căn giữa nó quamargin:0 auto;

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

— người dùng1721135
nguồn

4

Luôn thú vị khi thấy các giải pháp khác nhau cho cùng một vấn đề.

— Jim Aho

Chỉ được hỗ trợ trên các trình duyệt được cập nhật trong vài năm qua. caniuse.com/#feat=css-table

— CamHart

1

Giải pháp tốt nhất IMO

— Martijn Scheffer

10

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

— Ahmed Bahtity
nguồn

8

Áp dụng inline-blockcho phần tử sẽ được căn giữa và áp dụng text-align:centercho khối mẹ đã là một mẹo nhỏ đối với tôi.

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

— Talha Imam
nguồn

1

Các nhịp có thể gặp một chút khó khăn để giải quyết. nếu bạn đặt độ 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 khuyên bạn nên 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 kết với đỉnh đầu của tôi: jsFiddle

BIÊN TẬP:

Câu trả lời của Adrift là giải pháp dễ dàng nhất :)

— David Ziemann
nguồn

0

Tôi giả sử bạn muốn căn giữa chúng trên một dòng chứ không phải trên hai dòng riêng biệt dựa trên cách làm của bạn. Nếu đúng như vậy, hãy thử 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ỏ float vì bạn muốn căn giữa nó, và sau đó tạo khoảng trống bao quanh các liên kết được căn giữa bằng cách thêm margin: 0 auto vào chúng. Cuối cùng, tôi đã thêm chiều rộng tĩnh vào nhịp. Điều này căn giữa các liên kết trên một dòng trong div màu đỏ.

— Duffmaster33
nguồn

0

chỉ css div bạn mới có thể căn giữa nội dung

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

http://jsfiddle.net/4q2r69te/1/

— MrBii
nguồn