如何在 CSS 中居中顯示網格？
[英]How to center grid display in CSS?
問題描述
我有一個包含在容器中的按鈕的網格顯示。 按鈕之外的唯一內容是段落元素。 我想在調整頁面大小時使所有內容居中，但沒有找到解決方案。 我看到的最常見的解決方案是使用柔性顯示器。 那是行不通的。
p 元素確實以它自己為中心，但我想將所有內容都集中在“page-wrapper”容器中。
我注意到當我為網格的背景着色時，它占用了很多額外的空間。 我將寬度設置為合理的水平，看看我是否可以將它居中，但它仍然沒有居中。 即使是這樣，它也取代了我的按鈕並使 object 的大部分背景顏色。
*{ margin: 0; padding: 0; } body, html { height: 100%; } p { /*THIS THING IS BIG. MAKE IT NOT BIG*/ background-color: red; width: 400px; } #page-wrap { height: 1000px; width: 1000px; position: absolute; top: 10%; left: 25%; right: 25%; bottom: 25%; margin-left: 2%; margin-top: 2%; } #btn0 { grid-area: btn0; } #btn1 { grid-area: btn1; } #btn2 { grid-area: btn2; } #btn3 { grid-area: btn3; } #btn4 { grid-area: btn4; } #btn5 { grid-area: btn5; } #btn6 { grid-area: btn6; } #btn7 { grid-area: btn7; } #btn8 { grid-area: btn8; } #btn9 { grid-area: btn9; } #btnDot { grid-area: btnDot; } #btnDiv { grid-area: btnDiv; } #btnMult { grid-area: btnMult; } #btnPls { grid-area: btnPls; } #btnSub { grid-area: btnSub; } #btnEq { grid-area: btnEq; font-size: 40px; text-align: center; color: white; background-color: green; } #btnBkSp { grid-area: btnBkSp; } #btnClear { grid-area: btnClear; font-size: 20px; color: white; background-color:red; } button { border: 0px; background-color: black; color: white; font-size: 20px; }.buttons { display: grid; grid-template-columns: 10% 10% 10% 10%; grid-auto-rows: 50px; /* for demo */ grid-template-areas: 'btnClear btnClear btnBkSp btnDiv' 'btn7 btn8 btn9 btnMult' 'btn4 btn5 btn6 btnSub' 'btn1 btn2 btn3 btnPls' 'btn0 btnDot btnEq btnEq'; /*grid-gap: 1px;*/ background-color:green; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="author" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width. initial-scale=1"> <link href="style.css" rel="stylesheet"> </head> <body> <div id="page-wrap"> <p id = "display">0</p> <div class="buttons"> <button type="button" id="btn1"> 1 </button> <button type="button" id="btn2"> 2 </button> <button type="button" id="btn3"> 3 </button> <button type="button" id="btn4"> 4 </button> <button type="button" id="btn5"> 5 </button> <button type="button" id="btn6"> 6 </button> <button type="button" id="btn7"> 7 </button> <button type="button" id="btn8"> 8 </button> <button type="button" id="btn9"> 9 </button> <button type="button" id="btn0"> 0 </button> <button type="button" id="btnDot">. </button> <button type="button" id="btnPls"> + </button> <button type="button" id="btnSub"> - </button> <button type="button" id="btnMult"> x </button> <button type="button" id="btnDiv"> / </button> <button type="button" id="btnEq"> = </button> <button type="button" id="btnBkSp"> Backspace </button> <button type="button" id="btnClear"> Clear </button> </div> </div> <script src="script.js"></script> </body> </html>
2 個解決方案
解決方案1
1 2021-01-25 06:37:12
您必須設置 25% 的列寬來設置覆蓋該區域的完整寬度以及頁面換行寬度的百分比。
*{ margin: 0; padding: 0; } body, html { height: 100%; } p { /*THIS THING IS BIG. MAKE IT NOT BIG*/ background-color: red; width: 400px; } #page-wrap { height: 1000px; width: 1000px; position: absolute; top: 10%; left: 25%; right: 25%; bottom: 25%; margin-left: 2%; margin-top: 2%; } #btn0 { grid-area: btn0; } #btn1 { grid-area: btn1; } #btn2 { grid-area: btn2; } #btn3 { grid-area: btn3; } #btn4 { grid-area: btn4; } #btn5 { grid-area: btn5; } #btn6 { grid-area: btn6; } #btn7 { grid-area: btn7; } #btn8 { grid-area: btn8; } #btn9 { grid-area: btn9; } #btnDot { grid-area: btnDot; } #btnDiv { grid-area: btnDiv; } #btnMult { grid-area: btnMult; } #btnPls { grid-area: btnPls; } #btnSub { grid-area: btnSub; } #btnEq { grid-area: btnEq; font-size: 40px; text-align: center; color: white; background-color: green; } #btnBkSp { grid-area: btnBkSp; } #btnClear { grid-area: btnClear; font-size: 20px; color: white; background-color:red; } button { border: 0px; background-color: black; color: white; font-size: 20px; }.buttons { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-auto-rows: 50px; /* for demo */ grid-template-areas: 'btnClear btnClear btnBkSp btnDiv' 'btn7 btn8 btn9 btnMult' 'btn4 btn5 btn6 btnSub' 'btn1 btn2 btn3 btnPls' 'btn0 btnDot btnEq btnEq'; /*grid-gap: 1px;*/ background-color:green; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="author" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width. initial-scale=1"> <link href="style.css" rel="stylesheet"> </head> <body> <div id="page-wrap"> <p id = "display">0</p> <div class="buttons"> <button type="button" id="btn1"> 1 </button> <button type="button" id="btn2"> 2 </button> <button type="button" id="btn3"> 3 </button> <button type="button" id="btn4"> 4 </button> <button type="button" id="btn5"> 5 </button> <button type="button" id="btn6"> 6 </button> <button type="button" id="btn7"> 7 </button> <button type="button" id="btn8"> 8 </button> <button type="button" id="btn9"> 9 </button> <button type="button" id="btn0"> 0 </button> <button type="button" id="btnDot">. </button> <button type="button" id="btnPls"> + </button> <button type="button" id="btnSub"> - </button> <button type="button" id="btnMult"> x </button> <button type="button" id="btnDiv"> / </button> <button type="button" id="btnEq"> = </button> <button type="button" id="btnBkSp"> Backspace </button> <button type="button" id="btnClear"> Clear </button> </div> </div> <script src="script.js"></script> </body> </html>
解決方案2
1 已采納 2021-01-25 06:52:30
首先，請記住段落和網格都是塊，因此它們將占據所有可用寬度。 下圖代表了您目前的情況： 如您所見，您的網格占據了整個寬度，但您的列設置為僅占據網格寬度的 40%。 我相信你想要的是這樣的：
實現它的最簡單方法是為段落和按鈕的容器提供
auto邊距和所需的寬度：
#display,
.buttons {
margin: 0 auto;
width: 400px;
}
但我們還必須修復網格列的寬度。 為此，只需刪除行grid-template-columns: 10% 10% 10% 10%; 從.buttons 。
如何使用CSS / JS將等距網格置於背景中心
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.