我创建了一个包含 3 个子 Div 的父 Div。我希望 3 个 Div 中的每一个都在同一列上，但在屏幕中央，边框彼此分开 10px，同时仍将 3 个框保持在屏幕中央。
我对 CSS3 有非常基本的掌握
#prices {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px;
}
#tenor {
justify-self: end;
}
#bass {
justify-self: center;<!-- Beginning of HTML5 Code -->
<div id="prices">
<div id="tenor">
<h3>TENOR TROMBONE</h3>
<h4>$600</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="bass">
<h3>BASS TROMBONE</h3>
<h4>$900</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.com<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="valvet">
<h3>VALVET TROMBONE</h3>
<h4>$1200</h4>
<p>
Plays similar to a Trumpet.<br>
Great for Jazz Bands.<br>
Lorem ipsum.
<p><button class="btn">Select</button>
</p>
</div>
</div>使用上面的代码，一切都完美地居中，但 3 个框之间的每一个都有巨大的差距。如何消除间隙，但确保它仍然相对于屏幕居中？
提前谢谢你。
最佳答案
您可以使用 CSS flex 属性来实现这一点
<html>
<head>
<style>
#prices {
display: flex;
justify-content:center;
align-items:center;
margin: auto;
}
#tenor,
#bass,
#valvet {
border: 1px solid;
width: 100%;
max-width: 360px;
height: 330px;
text-align: center;
margin: 10px;
}
</style>
<body>
<div id="prices">
<div id="tenor">
<h3>TENOR TROMBONE</h3>
<h4>$600</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="bass">
<h3>BASS TROMBONE</h3>
<h4>$900</h4>
<p>
Lorem ipsum.<br>
Lorem ipsum.com<br>
Lorem ipsum dolor.<br>
Lorem ipsum.
</p>
<button class="btn">Select</button>
</div>
<div id="valvet">
<h3>VALVET TROMBONE</h3>
<h4>$1200</h4>
<p>
Plays similar to a Trumpet.<br>
Great for Jazz Bands.<br>
Lorem ipsum.
<p><button class="btn">Select</button>
</p>
</div>
</div>
</body>
</head>
</html>
关于html - 有没有办法消除我的 CSS3 网格中的间隙，并使网格居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54566062/