整个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找到。

你可以试试这个

保留它:display: grid;

并添加
width: fit-content;
在两个容器

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto auto auto auto auto auto;
background-color: #c8a2c8;
padding: 5px;
text-align: center;
margin: auto;
width: -moz-fit-content; /* For Mozilla firefox*/
width: -webkit-fit-content; /* For Google Chrome */
width: fit-content;
} 
.grid-container2 {
display: grid;
grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
background-color: #c8a2c8;
padding: 5px;
text-align: center;
margin: auto;
width: -moz-fit-content; /* For Mozilla firefox*/
width: -webkit-fit-content; /* For Google Chrome */
width: fit-content;
}

我有一个有效的解决方案，将这些规则添加到你的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。

相关内容

最新更新

热门标签：