CSS를 사용하여 페이지 중앙에 테이블을 배치하는 방법은 무엇입니까?

81

다음 코드를 사용하고 있습니다. 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
소스

1

다른 많은 질문의 중복 예 : stackoverflow.com/questions/2281087/center-a-div-in-css

— jacktheripper

4

수평 중심? 수직 중심? 양자 모두?

— Marc B

가로 및 세로 모두

— CodeBlue

1

Vertically align div (테이블 없음)

— JonH

106

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

예제 JSFiddle

블록 요소를 수직으로 정렬하는 것은 가장 쉬운 일이 아닙니다. 아래에 몇 가지 방법이 있습니다.

— 마이클 로빈슨
소스

이봐 요,하지만 이것은 수직이 아닌 수평으로 만 중앙에 위치했습니다. 또한 margin : 0 auto는 무엇입니까?

— CodeBlue 2012

@CodeBlue-다음 참조 : stackoverflow.com/questions/1909753/…

— JonH

31

다음 CSS를 사용해 볼 수 있습니다.

table {
    margin: 0 auto;            
}

— DarkAjax
소스

9

일부 대역폭은 px.

— Stephan

11

1) CSS에서 가로 정렬을 자동으로 설정

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

2) 페이지 중앙에 수직 정렬 가져 오기 css에 다음 추가

html, body { width: 100%; }

예 :

<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
소스

HTML4 및 HTML5 충돌로 인해 동일한 상황에 갇혔으며 HTML5 alignment="centre"에서 절대적이었습니다.

— 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>

— user2645333
소스

2

토탈 센터에있는 것과 같이 센터를 완성하기 위해 테이블에 대해 물어 보면 다음 코드를 적용 할 수 있습니다.

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

이 CSS 코드를 사용하면 테이블을 떠 다니는 것처럼 놓을 수 있습니다. 도움이되는지 알려주세요.

— 알록 라자 스쿠 마란
소스

-1

간단히 div에 넣고 해당 div whit css를 제어하십시오.

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

— 모센 솔 니아
소스