CSS Cách thích hợp để Nội dung Trung tâm

Tôi thích làm việc với CSS dựa trên thiết kế, nhưng như nhiều hơn một coder kết thúc trở lại kỹ năng CSS của tôi là một chút yếu. Khi tôi tham gia vào cách bố trí, tôi có xu hướng rơi trở lại trên bảng dựa trên định dạng bởi vì tâm trí của tôi đã bị biến dạng bởi nhiều năm lạm dụng dựa trên bảng. Có một vấn đề cụ thể mà tôi luôn luôn đi qua. là gì CSS thay thế tốt nhất để:CSS Cách thích hợp để Nội dung Trung tâm

<table width="100%"> 
    <tr> 
     <td align="center"> 
      content goes here 
     </td> 
    </tr> 
</table>

đôi khi tôi sử dụng:

<div style="width:100%; text-align:center">content</div>

Nhưng điều này dường như không hoàn toàn đúng. Tôi không cố sắp xếp văn bản, tôi đang cố căn chỉnh nội dung. Ngoài ra, điều này dường như có ảnh hưởng đến việc căn chỉnh văn bản của các phần tử kèm theo, đòi hỏi phải tinh chỉnh để sửa lỗi. Một điều tôi không nhận được là: tại sao không có một phao: phong cách trung tâm? Có vẻ như đó sẽ là giải pháp tốt nhất. Hy vọng rằng, tôi đang thiếu một cái gì đó và có một cách CSS hoàn hảo để làm điều này.

Nguồn

2009-04-06 Paul Keister

Bạn đúng rằng text-align được thiết kế để căn chỉnh văn bản. Nó thực sự chỉ là Internet Explorer cho phép bạn tập trung bất cứ điều gì khác hơn là văn bản với nó. Bất kỳ trình duyệt nào khác xử lý chính xác và không cho phép các phần tử chặn bị ảnh hưởng bởi text-align.

Để căn giữa các phần tử khối sử dụng css bạn sử dụng margin: 0 auto; giống như Joe Philllips đề xuất. Mặc dù bạn không cần phải giữ bàn.

Lý do không có float: center; là thả nổi được dự định để đặt các phần tử (thường là hình ảnh) sang trái hoặc phải và có dòng văn bản xung quanh. Nổi một cái gì đó ở trung tâm không có ý nghĩa trong bối cảnh này vì điều đó có nghĩa là văn bản sẽ phải chảy trên cả hai mặt của phần tử.

Nguồn

2009-04-06 19:07:08 Guffa

Bắt thú vị với chiếc bàn. Tôi không nhìn kỹ lắm. –

Hi cảm ơn câu trả lời, nó giúp. Nhưng làm thế nào 'margin: 0 tự động;' không có phép thuật, tôi không hiểu tại sao không và giá trị tự động sẽ tập trung vào bảng? – GMsoF

@GMsoF: Số không là lề thẳng đứng và tự động là biên độ horisontal. 'margin: 0 auto;' là dạng ngắn của 'margin: 0 auto 0 auto;', là dạng ngắn của 'margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; '. – Guffa

tôi sẽ khuyên bạn nên đặt một <div> vào <td> của bạn và thiết lập các thuộc tính style để style="width: 200px; margin: 0 auto;"

Việc nắm bắt được rằng bạn phải thiết lập chiều rộng cố định.

Chỉnh sửa: Sau khi xem lại câu hỏi, tôi khuyên bạn nên loại bỏ hoàn toàn bảng. Chỉ cần sử dụng <div style="width: 200px; margin: 0 auto;> như tôi đã đề xuất và không cần bàn.

Nguồn

2009-04-06 18:43:22

Hi nhờ câu trả lời, nó giúp. Nhưng cách margin: 0 auto; ma thuật, tôi không hiểu tại sao không và giá trị tự động sẽ tập trung vào bảng? – GMsoF

Câu trả lời của d03boy là đúng cho đúng cách để căn giữa mọi thứ.

Để trả lời nhận xét khác của bạn, "Ngoài ra, điều này dường như có ảnh hưởng đến căn chỉnh văn bản của các yếu tố được đính kèm, yêu cầu chỉnh sửa để khắc phục." Đó là bản chất của cách CSS hoạt động, thiết lập thuộc tính trên một phần tử ảnh hưởng đến tất cả các con của nó, trừ khi thuộc tính bị ghi đè bởi một trong số chúng (giả sử thuộc tính là một trong số đó là inherited, tất nhiên).

Nguồn

2009-04-06 18:50:33

Bạn thấy mình thường làm điều này ở đâu? Đối với tôi - Tôi thường nhất cố gắng để tập trung toàn bộ thiết kế của trang web, vì vậy tôi thường làm điều này:

<html> 
    <body> 
    <div id="wrapper"> 
    <div id="header"> 
    </div> 
    <div id="content"> 
    </div> 
    <div id="footer"> 
    </div> 
    </div> 
    </body> 
</html> 


body {text-align:center;} 
#wrapper {margin:0 auto; text-align:left; width:980px;}

này sẽ tập trung toàn bộ thiết kế trên trang tại 980px chiều rộng, trong khi vẫn để lại tất cả các văn bản của bạn căn trái (miễn là văn bản đó nằm trong phần tử #wrapper).

Nguồn

2009-04-06 18:58:17

Đây là tài nguyên tốt để tập trung sử dụng CSS.
http://www.w3.org/Style/Examples/007/center
Điều này chứng tỏ cách căn giữa văn bản, hình khối, hình ảnh và cách căn giữa chúng theo chiều dọc.

Nguồn

2009-04-06 19:11:32

Sử dụng display:inline-block để cho phép text-align:center và trung tâm nội dung mà không có chiều rộng cố định:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Centering</title> 

    <style type="text/css"> 
    .container { text-align:center; } 

    /* Percentage width */ 
    .wrapper { width: 99%; } 

    /* Use inline-block for wrapper */ 
    .wrapper { display: inline-block; } 

    /* Use inline for content */ 
    .content { display:inline; } 
    </style> 

</head> 
<body> 
    <div class="container"> 
    <div class="content"> 
     <div class="wrapper"> 
      <div>abc</div> 
      <div>xyz</div> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Nguồn

2012-10-20 22:04:34

Đây là một mẹo hay! –

CSS Cách thích hợp để Nội dung Trung tâm

Trả lời

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