关于CSS宽度的问题：100%

发布于 2024-12-02 03:06:13 字数 267 浏览 0 评论 0原文

我想创建一个灵活的网格布局（即任何地方都不能使用像素值）现在这是我的问题；对于外容器，一般我都是用

#container{width:1024px;margin:0 auto}

这个来居中对齐整个页面。现在，当我将其转换为基于 % 的 CSS 时，即

#container{width:100%;margin:0 auto}

在这种情况下，页面不会居中对齐。我该如何解决这个问题？

原文

I want to create a flexible grid layout (i.e. no pixel value to be used anywhere)
Now here is my question;
For the outer container, generally I use

#container{width:1024px;margin:0 auto}

This is to center align the entire page. Now when I convert the same to a % based CSS i.e.

#container{width:100%;margin:0 auto}

In this case, the page does not center align. How do I fix this issue?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傲娇萝莉攻 2024-12-09 03:06:13

页面无法居中对齐，因为它使用整个浏览器宽度。
尝试例如：“宽度：80%”，你就会明白我在说什么；

回复收藏 0 原文

初相遇 2024-12-09 03:06:13

确实，当某些东西填满整个宽度时，你怎么能期望它居中对齐呢？

回复收藏 0 原文

寂寞笑我太脆弱 2024-12-09 03:06:13

您的容器确实居中对齐。宽度为 100% 意味着容器占据父容器的所有宽度（假设屏幕），因此边距空间为 0。
通常，通过对容器应用边框可以轻松跟踪此类问题。

您可以通过使用 text-align: center; 将容器内部的元素居中来解决此问题

回复收藏 0 原文

昔梦 2024-12-09 03:06:13

如果我正确理解了这个问题，那么您似乎需要一些东西来阻止容器无限扩大，但在视口狭窄时仍然可以灵活扩展。如果是这种情况，您可以对其应用 max-width 来告诉它何时停止扩展：

#container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

在这种情况下，如果视口较小，您的容器将是灵活的并占用所有可用宽度宽度小于 1024 像素，但如果窗口变宽，则不会超过 1024 像素（并且将居中对齐）。

If I'm understanding the question correctly, you seem to be needing something to stop the container from widening infinitely, but still have it expand flexibly when the viewport is narrow. If this is the case, you can apply a max-width on it to tell it when to stop expanding:

#container {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

In this case, your container will be flexible and take up all available width if the viewport is less than 1024 pixels wide, but won't go beyond 1024 pixels (and will be center-aligned) if the window grows wider.

回复收藏 0 原文

~没有更多了~