英文:
Full width CSS grid item using place-content: center
问题
Sure, here's the translated code part:
我正在使用CSS网格的 `place-content: center` 来在固定容器中垂直和水平居中一个 div，代码如下：
.outer {
position: fixed;
inset: 0;
background: black;
display: grid;
place-content: center;
}
.inner {
padding: 30px;
background: white;
width: 100%;
max-width: 500px;
}
<div class="outer">
<div class="inner">一些内容在这里</div>
</div>
如果可能的话，我想让内部 div 充满整个宽度，但似乎不会遵守 width: 100% 属性，我期望它会这样做。有人能解释为什么会发生这种情况以及如何解决吗？如果可能的话，我想保持网格实现（我知道有其他居中方法，但出于好奇，我想尝试使这种方法工作！）
英文:
I'm using CSS grid's place-content: center to vertically and horizontally center a div in a fixed container, like so:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.outer {
position: fixed;
inset: 0;
background: black;
display: grid;
place-content: center;
}
.inner {
padding: 30px;
background: white;
width: 100%;
max-width: 500px;
}
<!-- language: lang-html -->
<div class="outer">
<div class="inner">Some content here</div>
</div>
<!-- end snippet -->
I would like the inner div to be full width, with a maximum width of 500px but it doesn't seem to respect the width: 100% property as I would expect.
Can someone explain why this is happening and how to resolve it, if possible keeping the grid implementation (I know there are alternatives to centering things like this but I'd like to try to get this method working, out of curiosity more than anything else!)
答案1
得分: 0
Instead of using place-content, you can use place-self on the grid item.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.外部 {
position: fixed;
inset: 0;
背景: 黑色;
显示: 网格;
}
.内部 {
padding: 30px;
背景: 白色;
宽度: 100%;
最大宽度: 500px;
自我放置: 居中;
}
<!-- language: lang-html -->
<div class="外部">
<div class="内部">一些内容在这里</div>
</div>
<!-- end snippet -->
英文:
Instead of using place-content you can use place-self on the grid item.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.outer {
position: fixed;
inset: 0;
background: black;
display: grid;
}
.inner {
padding: 30px;
background: white;
width: 100%;
max-width: 500px;
place-self: center;
}
<!-- language: lang-html -->
<div class="outer">
<div class="inner">Some content here</div>
</div>
<!-- end snippet -->
答案2
得分: -1
你可以使用flex而不是grid，这样你可以非常容易地实现这个效果。
.outer {
position: fixed;
width: 100%;
height: 100%;
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
padding: 30px;
background: white;
width: 100%;
}
<div class="outer">
<div class="inner">这里放置内容</div>
</div>
英文:
You can use flex instead of grid, which allow you to do so really easily.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.outer {
position: fixed;
width: 100%;
height: 100%;
background: black;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
padding: 30px;
background: white;
width: 100%;
}
<!-- language: lang-html -->
<div class="outer">
<div class="inner">Some content here</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论