gpt4 book ai didi

html - 如何让我的 CSS 网格居中?

转载 作者:太空宇宙 更新时间:2023-11-04 08:29:38 24 4
gpt4 key购买 nike

我只是想弄清楚如何在页面上放置这个网格 - 我在左侧和下方得到了这个空白,但不确定从哪里来。我包括了很多 CSS 和相关的网格代码。还有一个外部样式表,上面可能有一些东西可以做到这一点,但我已经看过它并且不这么认为。任何人都知道这可能是什么原因造成的?我是否错误地设计了网格并以某种方式跳到了第二列,或者这是边距空间?只是想让网格稍微居中,周围有均匀的边距。抱歉,如果我在格式方面做错了什么或发布了太多代码 - 已经有一段时间没有发布了(也是在四个小时的 sleep 中运行)。谢谢。

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>

最佳答案

.navigationbuttons 上添加 justify-content: center;

关于html - 如何让我的 CSS 网格居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44877849/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com