Как разместить таблицу в центре страницы с помощью CSS? - PullRequest
Новая
       63

Как разместить таблицу в центре страницы с помощью CSS?

59 голосов
/ 23 февраля 2012

Я использую следующий код.Как поместить эту таблицу в центр страницы с помощью 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>

Ответы [ 6 ]

82 голосов
/ 23 февраля 2012 
html, body {
    width: 100%;
}
table {
    margin: 0 auto;
}

Пример JSFiddle

Вертикальное выравнивание элементов блока - не самая простая вещь. Некоторые методы ниже.

18 голосов
/ 23 февраля 2012

Вы можете попробовать использовать следующий CSS: 

table {
    margin: 0px auto;            
}​
9 голосов
/ 15 апреля 2015

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>
8 голосов
/ 21 января 2014 
<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>
2 голосов
/ 16 марта 2015

Если вы спрашиваете о столе, чтобы завершить центр, как что-то в общем центре., Вы можете применить следующий код. 

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

этот код в css позволит вам поместить вашу таблицу как плавающую. Скажите, поможет ли это вам.

0 голосов
/ 07 апреля 2015

просто поместите его в div, затем управляйте этим div с whit css: 

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