2012-12-28 56 views
35

Trên trang tôi đang làm việc vào lúc này, tôi dường như không thể căn giữa một bảng có hình ảnh ở hàng đầu tiên và hai cột văn bản bên dưới nó (hai các cột không được lớn hơn chiều rộng của hình ảnh) Đây là trang: http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html Tôi đã dành rất nhiều thời gian để giải quyết vấn đề này. Tôi muốn giữ nó trong HTML bởi vì tôi phải vội vàng và cũng bởi vì tôi phải tạo ra 20 trang của các loại với chiều rộng khác nhau/+ bố trí cho mỗi hình ảnh.Căn giữa trên một bảng HTML

Trả lời

74

Đối với thiết kế của bạn, đó là thực tế phổ biến để sử dụng divs chứ không phải là một bảng. Bằng cách này, bố cục của bạn sẽ dễ bảo trì hơn và có thể thay đổi thông qua kiểu dáng phù hợp. Nó có một số nhận được sử dụng để, nhưng nó sẽ giúp bạn một tấn trong thời gian dài và bạn sẽ tìm hiểu rất nhiều về cách tạo kiểu hoạt động. Tuy nhiên, tôi sẽ cung cấp cho bạn một giải pháp cho vấn đề trong tầm tay.

Trong bảng định kiểu, bạn có lề và đệm được đặt thành 0 pixel. Điều này ghi đè thuộc tính align="center" của bạn. Tôi khuyên bạn nên lấy các cài đặt này ra khỏi CSS của bạn vì bạn thường không muốn tất cả các phần tử của bạn bị ảnh hưởng theo cách này. Nếu bạn đã biết những gì đang xảy ra trong CSS, và bạn muốn giữ nó theo cách đó, thì bạn phải áp dụng một kiểu cho bảng của bạn để ghi đè lên các tập trước đó. Bạn có thể đưa ra một bảng class hoặc bạn có thể đặt phong cách nội tuyến với HTML. Dưới đây là hai lựa chọn:

  1. Với một lớp:

    <table class="centerTable"></table>

Trong file style.css của bạn, bạn sẽ có một cái gì đó như thế này:

.centerTable { margin: 0px auto; } 
  1. Inline với mã HTML của bạn:

    <table style="margin: 0px auto;"></table>

Nếu bạn quyết định để tiêu diệt bên lề và padding được thiết lập để 0px thì bạn có thể giữ align="center" trên <td> thẻ của bạn cho bất cứ điều gì cột bạn muốn sắp xếp.

12

Hãy thử điều này -

<table align="center" style="margin: 0px auto;"></table> 
+15

Thuộc tính 'align' đã lỗi thời và không cần thiết đối với các trang hoạt động ở chế độ tuân thủ tiêu chuẩn (nghĩa là với DOCTYPE thích hợp). –

19
table 
{ 
margin-left: auto; 
margin-right: auto; 
} 

Điều này chắc chắn sẽ hiệu quả. Chúc mừng

+0

cảm ơn, hoạt động hoàn hảo và HTML5 tuân thủ các câu trả lời trước đó. – schlingel

+0

Bạn là thánh! –

-1
<table align="center"></table> 

Điều này phù hợp với tôi.

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