时间戳

首页 > 解决方案 > 如何在框元素中定位表格单元格

html - 如何在框元素中定位表格单元格

问题描述

我使用 HTML 和 CSS 制作了一个棋盘来完成一项任务。现在我需要将此棋盘放置在 box 元素内，以便左/右边距相同，并显示标题元素。我尝试使用 margin: auto; 但这不起作用也没有将框大小更改为内容框或边框框。

我不允许使用 line-height 来垂直对齐，所以我需要 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;
}

标签： htmlcssmargintablecellbox-sizing

解决方案

只需从 中删除整个display:table-cell;属性table.chessboard{}。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>

推荐阅读