html - How to center grid display in CSS?

Question

Welcome To Ask or Share your Answers For Others

html - How to center grid display in CSS?

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - How to center grid display in CSS?

I have a grid display of buttons wrapped in a container. The only thing outside of the buttons is a paragraph element. I want to keep everything centered when resizing the page but haven't found a solution. The most common solution I see is using a flex display. That isn't working.

The p element does center on it's own but I want to center everything inside the "page-wrapper" container.

I noticed that when I colored the background of the grid, it was taking up a lot of extra space. I set the width to a reasonable level to see if I could center it but it STILL didn't center. Even if it did, it displaced my buttons and make the background color most of the 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>

question from:https://stackoverflow.com/questions/65879583/how-to-center-grid-display-in-css

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:21:31+0000

First, keep in mind that both the paragraph and the grid are blocks, so they'll take up all available width. The following drawing represent your current situation: As you can see, your grid takes the full width, but your columns are set to take up only 40% of the width of the grid. I believe what you want is something like this: The simplest way to achieve it is giving both the paragraph and the buttons' container an auto margin and the desired width:

#display,
.buttons {
  margin: 0 auto;
  width: 400px;
}

But we also have to fix the width of your grid columns. For that, just remove the line grid-template-columns: 10% 10% 10% 10%; from .buttons.

Categories

html - How to center grid display in CSS?

html - How to center grid display in CSS?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags