Làm cách nào để đặt bảng ở giữa trang bằng CSS?

81

Tôi đang sử dụng mã sau đây. Làm thế nào để đặt bảng này ở giữa trang bằng cách sử dụng CSS?

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>The Main Page</title>
    </head>
    <body>
        <table>
            <tr>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
            </tr>
        </table>
    </body>
</html>

— CodeBlue
nguồn

1

Bản sao của nhiều câu hỏi khác, ví dụ: stackoverflow.com/questions/2281087/center-a-div-in-css

— jacktheripper

4

căn giữa theo chiều ngang? căn giữa theo chiều dọc? cả hai?

— Marc B

Theo cả chiều ngang và chiều dọc

— CodeBlue 22/02/12

1

có thể trùng lặp của Vertically div class (không bàn)

— Jonh

106

html, body {
    width: 100%;
}
table {
    margin: 0 auto;
}

Ví dụ JSFiddle

Việc sắp xếp các phần tử khối theo chiều dọc không phải là điều nhỏ nhặt nhất. Một số phương pháp dưới đây.

— Michael Robinson
nguồn

Này, nhưng điều này chỉ căn giữa nó theo chiều ngang chứ không phải theo chiều dọc. Ngoài ra, margin: 0 auto là gì?

— CodeBlue 22/02/12

@CodeBlue - sau đó xem điều này: stackoverflow.com/questions/1909753/…

— JonH

31

Bạn có thể thử sử dụng CSS sau:

table {
    margin: 0 auto;            
}

— DarkAjax
nguồn

9

Một số băng thông có thể được cứu bằng cách xóa px.

— Stephan,

11

1) Đặt căn chỉnh ngang thành tự động trong CSS

margin-left: auto; margin-right: auto;

2) Căn chỉnh theo chiều dọc ở giữa trang, thêm phần sau vào css

html, body { width: 100%; }

Ví dụ :

<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}

html, body {
    width: 100%;
}

</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
        <tr>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
        </tr>
</table>

</body>
</html>

— Gopal00005
nguồn

Bị mắc kẹt trong tình huống tương tự vì xung đột HTML4 và HTML5 và alignment="centre"tuyệt đối trong HTML5.

— Gopal00005

8

<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}
</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
  <tr>
    <th>SNO</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>1</td>
    <td>yazali</td>
  </tr>
</table>

</body>
</html>

— người dùng2645333
nguồn

2

Nếu bạn hỏi về bảng để hoàn thành trung tâm, như một số điều trong trung tâm toàn bộ., Bạn có thể áp dụng mã sau.

margin: 0px auto;
margin-top: 13%;

mã này trong css sẽ cho phép bạn đặt bảng của bạn như nổi. Hãy cho tôi biết nếu nó giúp bạn ra ngoài.

— Alok Rajasukumaran
nguồn

-1

chỉ cần đặt nó vào div sau đó điều khiển div whit css:

<div class="your_position">
  <table>
  </table>
</div>

— mohsen solhnia
nguồn