如何在框元素中定位 table-cell

Question

我使用 HTML 和 CSS 制作了一个棋盘作为作业。现在我需要将这个 Chessboard 放置在 box 元素内，这样 margin left/right 将相同并且显示 header 元素。我尝试使用 margin: auto;但这没有用将框大小更改为内容框或边框框也没有用。

我不允许使用行高来垂直对齐，所以我需要 display:table-cell 和 vertical-align:middle。如果有帮助，我也不能使用 justify-content 。应该用基本的 HTML 和 CSS.

来完成

如何让棋盘像图片一样正确定位？

JSFiddle

HTML

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <section class="chessboardbox">
        <h2>Chessboard</h2>
            <table class="chessboard">
                <tr class="chessboard">
                    <td class="chessboard">&#9820;</td>
                    <td class="chessboard">&#9822;</td>
                    <td class="chessboard">&#9821;</td>
                    <td class="chessboard">&#9819;</td>
                    <td class="chessboard">&#9818;</td>
                    <td class="chessboard">&#9821;</td>
                    <td class="chessboard">&#9822;</td>
                    <td class="chessboard">&#9820;</td>
                </tr>
                <tr class="chessboard">
                    <td class="chessboard">&#9823;</td>
                    <td class="chessboard">&#9823;</td>
                    <td class="chessboard">&#9823;</td>
                    <td class="chessboard">&#9823;</td>
                    <td class="chessboard">&#9823;</td>
                    <td class="chessboard">&#9823;</td>
                    <td class="chessboard">&#9823;</td>
                    <td class="chessboard">&#9823;</td>
                </tr>
                <tr class="chessboard">
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                </tr>
                <tr class="chessboard">
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                </tr>
                <tr class="chessboard">
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                </tr>
                <tr class="chessboard">
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                    <td class="chessboard"></td>
                </tr>
                <tr class="chessboard">
                    <td class="chessboard">&#9817;</td>
                    <td class="chessboard">&#9817;</td>
                    <td class="chessboard">&#9817;</td>
                    <td class="chessboard">&#9817;</td>
                    <td class="chessboard">&#9817;</td>
                    <td class="chessboard">&#9817;</td>
                    <td class="chessboard">&#9817;</td>
                    <td class="chessboard">&#9817;</td>
                </tr>
                <tr class="chessboard">
                    <td class="chessboard">&#9814;</td>
                    <td class="chessboard">&#9816;</td>
                    <td class="chessboard">&#9815;</td>
                    <td class="chessboard">&#9813;</td>
                    <td class="chessboard">&#9812;</td>
                    <td class="chessboard">&#9815;</td>
                    <td class="chessboard">&#9816;</td>
                    <td class="chessboard">&#9814;</td>
                </tr>
            </table>
        </section>
    </body>
</html>

CSS

    .chessboardbox {
    box-sizing: border-box;
    border: 5px solid silver;
    max-width: 1200px;
}

table.chessboard {
    box-sizing: border-box;
    display: table-cell;
    margin: 48px auto;
    background: #999;
    border: 5px solid red;
    box-shadow: 0 0 0 20px #fff, 0 0 0 40px black;
}
td.chessboard {
    width: 80px;
    height: 80px;
    font-size:50px;
}

tr.chessboard {
    text-align: center;
    vertical-align: middle;
}

tr.chessboard:nth-child(odd) td.chessboard:nth-child(even),
tr.chessboard:nth-child(even) td.chessboard:nth-child(odd) {
    background: white;
}

Answer 1

我在带有棋盘的 table 标签上添加了两个 div 标签 class 以帮助将棋盘居中：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <section class="chessboardbox">
        <h2 class="title">Chessboard</h2>
        <!-- ADDED HERE -->
        <div class="inner">
          <div class="board">
          <table class="chessboard">
            <tr class="chessboard">
                <td class="chessboard">&#9820;</td>
                <td class="chessboard">&#9822;</td>
                <td class="chessboard">&#9821;</td>
                <td class="chessboard">&#9819;</td>
                <td class="chessboard">&#9818;</td>
                <td class="chessboard">&#9821;</td>
                <td class="chessboard">&#9822;</td>
                <td class="chessboard">&#9820;</td>
            </tr>
            <tr class="chessboard">
                <td class="chessboard">&#9823;</td>
                <td class="chessboard">&#9823;</td>
                <td class="chessboard">&#9823;</td>
                <td class="chessboard">&#9823;</td>
                <td class="chessboard">&#9823;</td>
                <td class="chessboard">&#9823;</td>
                <td class="chessboard">&#9823;</td>
                <td class="chessboard">&#9823;</td>
            </tr>
            <tr class="chessboard">
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
            </tr>
            <tr class="chessboard">
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
            </tr>
            <tr class="chessboard">
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
            </tr>
            <tr class="chessboard">
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
                <td class="chessboard"></td>
            </tr>
            <tr class="chessboard">
                <td class="chessboard">&#9817;</td>
                <td class="chessboard">&#9817;</td>
                <td class="chessboard">&#9817;</td>
                <td class="chessboard">&#9817;</td>
                <td class="chessboard">&#9817;</td>
                <td class="chessboard">&#9817;</td>
                <td class="chessboard">&#9817;</td>
                <td class="chessboard">&#9817;</td>
            </tr>
            <tr class="chessboard">
                <td class="chessboard">&#9814;</td>
                <td class="chessboard">&#9816;</td>
                <td class="chessboard">&#9815;</td>
                <td class="chessboard">&#9813;</td>
                <td class="chessboard">&#9812;</td>
                <td class="chessboard">&#9815;</td>
                <td class="chessboard">&#9816;</td>
                <td class="chessboard">&#9814;</td>
            </tr>
        </table>
        </div>
        </div>
    </section>
</body>
</html>

这是我添加的 css 个元素：

已添加：

.title {
  text-align: center;
}

.inner {
  padding: 5% 20%;
}

.board {
  margin: 30px;
}

已更改：

.chessboardbox {
  box-sizing: border-box;
  border: 5px solid silver;
  display: block;
}

Answer 2

只需从 table.chessboard{} 中删除整个 display:table-cell; 属性。我还为您将 h2 文本居中。 jsFiddle

.chessboardbox {
  box-sizing: border-box;
  border: 5px solid silver;
  max-width: 1200px;
}

.chessboardbox>h2 {
  text-align: center;
}

table.chessboard {
  box-sizing: border-box;
  margin: 48px auto;
  background: #999;
  border: 5px solid red;
  box-shadow: 0 0 0 20px #fff, 0 0 0 40px black;
}

td.chessboard {
  width: 80px;
  height: 80px;
  font-size: 50px;
}

tr.chessboard {
  text-align: center;
  vertical-align: middle;
}

tr.chessboard:nth-child(odd) td.chessboard:nth-child(even),
tr.chessboard:nth-child(even) td.chessboard:nth-child(odd) {
  background: white;
}

<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <section class="chessboardbox">
      <h2>Chessboard</h2>
      <table class="chessboard">
        <tr class="chessboard">
          <td class="chessboard">&#9820;</td>
          <td class="chessboard">&#9822;</td>
          <td class="chessboard">&#9821;</td>
          <td class="chessboard">&#9819;</td>
          <td class="chessboard">&#9818;</td>
          <td class="chessboard">&#9821;</td>
          <td class="chessboard">&#9822;</td>
          <td class="chessboard">&#9820;</td>
        </tr>
        <tr class="chessboard">
          <td class="chessboard">&#9823;</td>
          <td class="chessboard">&#9823;</td>
          <td class="chessboard">&#9823;</td>
          <td class="chessboard">&#9823;</td>
          <td class="chessboard">&#9823;</td>
          <td class="chessboard">&#9823;</td>
          <td class="chessboard">&#9823;</td>
          <td class="chessboard">&#9823;</td>
        </tr>
        <tr class="chessboard">
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
        </tr>
        <tr class="chessboard">
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
        </tr>
        <tr class="chessboard">
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
        </tr>
        <tr class="chessboard">
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
          <td class="chessboard"></td>
        </tr>
        <tr class="chessboard">
          <td class="chessboard">&#9817;</td>
          <td class="chessboard">&#9817;</td>
          <td class="chessboard">&#9817;</td>
          <td class="chessboard">&#9817;</td>
          <td class="chessboard">&#9817;</td>
          <td class="chessboard">&#9817;</td>
          <td class="chessboard">&#9817;</td>
          <td class="chessboard">&#9817;</td>
        </tr>
        <tr class="chessboard">
          <td class="chessboard">&#9814;</td>
          <td class="chessboard">&#9816;</td>
          <td class="chessboard">&#9815;</td>
          <td class="chessboard">&#9813;</td>
          <td class="chessboard">&#9812;</td>
          <td class="chessboard">&#9815;</td>
          <td class="chessboard">&#9816;</td>
          <td class="chessboard">&#9814;</td>
        </tr>
      </table>
    </section>
  </body>

</html>

如何在框元素中定位 table-cell

How to position table-cell in a box-element

html

css

margin

tablecell

box-sizing