时间戳

首页 > 解决方案 > 将整个 CSS 网格相对于整个页面居中

html - 将整个 CSS 网格相对于整个页面居中

问题描述

我有两个表格，我想在我的网页中居中（链接在这里：https ://juancarlosortizr.github.io/sudoku/sudoku.html ）。表格的 CSS 代码是：

但是我尝试过到处寻找，我发现的只是如何将单元格内的文本相对于单元格本身居中；不是如何将整个表格居中（水平）。有办法吗？

    .grid-container {
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    background-color: #c8a2c8;
    padding: 5px;
    text-align: center;
    margin: auto;
    } 

    .grid-container2 {
    display: inline-grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
    background-color: #c8a2c8;
    padding: 5px;
    text-align: center;
    }

    .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 5px;
    font-size: 18px;
    text-align: center;
    }
    <body>
    
    <!-- header and navbar omitted here -->
    
    <!-- The flexible grid (content) -->
    <div class="row">
      <!-- "side" omitted here -->
    
      <div class="main">
    
        <h2 id="sudoku">Sudoku Solver</h2>
            <p>Input a solvable sudoku, and it'll spit out a solution! If it's unsolvable, it'll let you know.

                You can leave empty squares empty, or fill them out with a zero or a dot.
            </p>

                <div class="grid-container">
                    <div class="grid-item"><input type="number" id="x1" name="quantity" min="1" max="9"></div>
                    <div class="grid-item"><input type="number" id="x2" name="quantity" min="1" max="9"></div>
                    <div class="grid-item"><input type="number" id="x3" name="quantity" min="1" max="9"></div> <!-- etc... -->
                    <div class="grid-item"><input type="number" id="x81" name="quantity" min="1" max="9"></div>
                  </div>
                </div>

                <p> <button onclick="solveSudoku()">Click when ready!</button> </p>

                <body> 
                    Here is the solution board. If it is full of dots, that means no solution exists! (Sadly, in the current version of the project, the algorithm doesn't detect whether or not the solution is unique).
                </body>
                <p>

                <body>    
                <div class="grid-container2">
                    <div class="grid-item"> <text id="board1"></text> </div>
                    <div class="grid-item"> <text id="board2"></text> </div>
                    <div class="grid-item"> <text id="board3"></text> </div> <!-- etc... -->


                    <div class="grid-item"> <text id="board81"></text> </div>
                </div>
            </body>

            </p>
      </div>
       
    </body>

整个事情可以在https://github.com/juancarlosortizr/juancarlosortizr.github.io/blob/master/sudoku/sudoku.html找到。

标签： htmlcsscentering

解决方案

我有一个可行的解决方案，将这些规则添加到您的 css

.panelb {
    display: flex;
}

.grid-container {
    /* flex: 1; <-- remove this line */
    display: inline-grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto;
    background-color: #c8a2c8;
    padding: 5px;
    text-align: center;
    margin: auto;
}

尽管我在您的 HTML 中看到您可能需要添加容器 div，但可以对第二个表使用类似的方法。

推荐阅读