Question

我只是想弄清楚如何在页面上放置这个网格 - 我在左边和下面得到这个空白区域，不知道从哪里来。我包含了很多CSS和相关的网格代码。还有一个外部样式表可能会有一些东西可以让它做到这一点，但我已经过了它并且不这么认为。有谁知道这可能导致什么？我是否错误地设计了网格并以某种方式跳到第二列，或者是这个边距空间？只是试图让网格在某种程度上居中，周围有一个均匀的边距。对不起，如果我做了一些错误的格式化或发布了太多的代码 - 避免发布一段时间（也运行四小时的睡眠）。感谢。

How it looks

<style>

html {
  overflow: hidden;
  height: 100%;
}

p {
  text-indent: 50px;
  font-size: 200px;
  color: white;
  font-family:'y14.5m-20092009';
}

body {
  -webkit-font-smoothing: antialiased;
   background-color: white;   
   overflow: auto; 
   margin: 0px;
}

div#furtheroptions {
  font-size: 30px;
  color: white;
}

.hidden {
  display: none;
}

div#fixedfooter {
  position:fixed;
  bottom:0px;
  left:0px;
  width:100%;
  color: #ba2337;
  background:#333;
  padding:8px;
  font-family:'y14.5m-20092009';
  font-size: 20px;
  text-align: center;
}

input[type=text] {
    width: 400px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    color: #ba2337;
}

button {
  text-align: center;
  border: 1px solid white !important;
  border-radius: 5px;
  outline: none; /*keeps blue selection border off*/
}

.navigationbuttons {
  display: grid;
  grid-gap: 10px;
  background-color: white;
  color: #ba2337;
  width: 100%;
  font-family:'y14.5m-20092009'; 
  margin-right: 100px;
}

    .box {
      background-color: #ba2337;
      color: #fff;
      border-radius: 5px;
      padding: 20px;
      font-size: 150%;
    }
    .a {
        grid-column: col / span 4;
        grid-row: row / span 3;
    }
    .b {
        grid-column: col / span 4;
        grid-row: row 4 / span 3;
    }
    .c {
        grid-column: col / span 1;
        grid-row: row 7;
    }
    .d {
        grid-column: col 2 / span 2;
        grid-row: row 7;
    }
    .e {
        grid-column: col 4;
        grid-row: row 7;
    }
    .f {
        grid-column: col / span 1;
        grid-row: row 8 / span 1;
    }
    .g {
        grid-column: col 2/ span 2;
        grid-row: row 8 / span 1;
    }
    .h {
        grid-column: col 4 /span 1;
        grid-row: row 8 / span 1;
    }
    .i {
        grid-column: col 1/ span 2;
        grid-row: row 9 / span 3;
    }
    .j {
        grid-column: col 3 /span 2;
        grid-row: row 9 / span 3;
    }

</style>

</head>

<body>
<form>
<div class="navigationbuttons">
<div class="box a">A</div>
<div class="box b"><font size=300px>B</font></div>
<div class="box c">C</div>
<div class="box d"><font size=5>D</font></div>
<div class="box e">E</div>
<div class="box f">F</div>
<div class="box g" style="text-align: center"><input type="text" name="search"  placeholder="Search.."></div>
<div class="box h"><button type="button" class="button" onclick="location.href = 'http://www.google.com';"</button>Button 1</div>
<div class="box i"><button type="button" class="button" onclick="location.href = 'http://www.google.com';"</button>Button 2</div>
<div class="box j"><button type="button" class="button" onclick="location.href = 'http://www.google.com';"</button>Button 3</div>
</form>
</div>

Answer 1

在justify-content: center;上添加.navigationbuttons。

Answer 2

从margin-right移除.navigationbuttons并添加justify-content: center

＆＃13;

html {
  overflow: hidden;
  height: 100%;
}

p {
  text-indent: 50px;
  font-size: 200px;
  color: white;
  font-family: 'y14.5m-20092009';
}

body {
  -webkit-font-smoothing: antialiased;
  background-color: white;
  overflow: auto;
  margin: 0px;
}

div#furtheroptions {
  font-size: 30px;
  color: white;
}

.hidden {
  display: none;
}

div#fixedfooter {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  color: #ba2337;
  background: #333;
  padding: 8px;
  font-family: 'y14.5m-20092009';
  font-size: 20px;
  text-align: center;
}

input[type=text] {
  width: 400px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  color: #ba2337;
}

button {
  text-align: center;
  border: 1px solid white !important;
  border-radius: 5px;
  outline: none;
  /*keeps blue selection border off*/
}

.navigationbuttons {
  display: grid;
  grid-gap: 10px;
  background-color: white;
  color: #ba2337;
  width: 100%;
  font-family: 'y14.5m-20092009';
  justify-content: center;
}

.box {
  background-color: #ba2337;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-column: col / span 4;
  grid-row: row / span 3;
}

.b {
  grid-column: col / span 4;
  grid-row: row 4 / span 3;
}

.c {
  grid-column: col / span 1;
  grid-row: row 7;
}

.d {
  grid-column: col 2 / span 2;
  grid-row: row 7;
}

.e {
  grid-column: col 4;
  grid-row: row 7;
}

.f {
  grid-column: col / span 1;
  grid-row: row 8 / span 1;
}

.g {
  grid-column: col 2/ span 2;
  grid-row: row 8 / span 1;
}

.h {
  grid-column: col 4 /span 1;
  grid-row: row 8 / span 1;
}

.i {
  grid-column: col 1/ span 2;
  grid-row: row 9 / span 3;
}

.j {
  grid-column: col 3 /span 2;
  grid-row: row 9 / span 3;
}

＆＃13;

<form>
  <div class="navigationbuttons">
    <div class="box a">A</div>
    <div class="box b">
      <font size=300px>B</font>
    </div>
    <div class="box c">C</div>
    <div class="box d">
      <font size=5>D</font>
    </div>
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box g" style="text-align: center"><input type="text" name="search" placeholder="Search.."></div>
    <div class="box h"><button type="button" class="button" onclick="location.href = 'http://www.google.com'">Button 1</button></div>
    <div class="box i"><button type="button" class="button" onclick="location.href = 'http://www.google.com';">Button 2</button></div>
    <div class="box j"><button type="button" class="button" onclick="location.href = 'http://www.google.com';">Button 3</button></div>
</form>
</div>

＆＃13;

Answer 3

首先，如果这是您的代码，那么您将拥有大量未公开的HTML标记。

然后，如果您希望网格在页面中居中，最简单的方法是将一个类赋予网格的容器（在这种情况下为表单标记，但您也可以在表单下创建一个新的）并给它这些规则：

.centeredGrid {
    display: table;
    margin: auto;
}

A working example is here

大小取决于输入字段width，在您的情况下为400px。

完整代码（已使用已关闭的HTML代码修复）为here

您也可以使用display: flex代替表格，但请记住flexbox is not supported in IE9 and lower and for IE10 and IE11 you have to use the vendor prefix。

如何让我的CSS网格居中？

3 个答案: