CSS 将带有嵌套 div 的 div 居中到浏览器的真实中心，而不指定宽度

发布于 2024-11-01 06:42:54 字数 495 浏览 5 评论 0原文

天啊，真的，我已经来过这里一千次了。我很想摘录这个答案。我不敢相信做这么简单的事情有多难。

<body>
    <div class="wrapper">
         <div class="class1">Page 1 of 1</>
         <div class="class1"> — </>
         <div class="class1">Next</>
    </div>
</body>

我需要包装器位于浏览器的正中心。其中文本的长度或 div 的数量并不重要。到底是怎么做到这一点的？我在这里吓坏了。我的 CSS 还不错。谷歌搜索会发现 2005 年的论坛帖子。或者找到答案，因为宽度是指定的，所以这只是作弊。

头发被拔掉了！

我不会把我的 CSS 放在这里，因为它不起作用，没有意义。

谢谢。

原文

OMG, Really I've been here a thousand times before. I am so going to snippet this answer.
I cannot believe how hard it is to do something as easy as this.

<body>
    <div class="wrapper">
         <div class="class1">Page 1 of 1</>
         <div class="class1"> — </>
         <div class="class1">Next</>
    </div>
</body>

I need the wrapper to be dead centre to the browser. Doesn't matter what the length of the text within is, or the amount of divs. How on earth does one do this?! I'm freaking out here. I'm not that bad at CSS. Googling this turns up forum posts from 2005. Or answers are found because the width was specified so that's just cheating.

Hair is being pulled out!

I won't put my CSS in here cos it's just not working, theres no point.

Thanks.

分享到QQ

分享到微博

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

发布评论

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

梦明 2024-11-08 06:42:54

也许我错过了一些东西，但是为什么这对你不起作用？：

.wrapper {
     text-align:center;   
}

你说你的 CSS 不是不相关，所以要么这太简单了，要么我错过了一些东西。话又说回来，有时最简单的解决方案就是最好的解决方案。

如果您需要以某种方式显示内部 div，您没有提到它 - 所以我没有包含它。

确定没有指定内部的 div 需要彼此相邻浮动

OK，然后使用 display:inline 位于内部 div 上：

.wrapper div {
    display:inline;
}

“但是我需要将它们显示为块，并且它们必须浮动！”

好的，然后将它们浮动并在需要时使用clearfix。

.wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

在没有clearfix的情况下浮动内部div仍然可以很好地工作，但是您没有提供您想要的模型，因此这使得回答这个问题变得更加困难。

IMO float 在许多不需要它的情况下使用，这可能会导致很多布局问题。这是一种人们对它知之甚少的财产，并且经常被滥用。

Maybe I'm missing something, but why does this not work for you?:

.wrapper {
     text-align:center;   
}

You said your CSS wasn't relevant, so either this is too easy or I'm missing something. Then again - sometimes the simplest solution is the best one.

If you need the inner divs displayed a certain way, you didn't mention it - so I didn't include it.

OK didn't specify that the divs within need to float next to each other

OK, then use display:inline on the inner divs:

.wrapper div {
    display:inline;
}

"But I need them displayed block and they MUST be floated!"

OK, then just float them and use a clearfix if you need it.

.wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

This still works fine floating the inner divs without the clearfix, but you didn't provide a mockup of what you wanted so it makes answering this question more difficult.

IMO float is used in many situations where it is not needed, which can cause a lot of layout problems. It's a very poorly understood property and gets abused regularly.

回复收藏 0 原文

七度光 2024-11-08 06:42:54

工作jsfiddle： http://jsfiddle.net/6utN2/1/

我想你会最好使用 UL 对其进行编码，并为您的 3 个元素使用 LI。

原因如下：.wrapper 必须充当这 3 个 div 的容器，因为您已将它们浮动 - 将它们从文档流中取出。

解决由此引起的问题的唯一方法是包装你的包装器......这不是人们可以编写的最精简的解决方案。

UL 技术在这里效果很好，虽然一开始不太直观，但是 UL 是容器，LI 都可以向左浮动（并且将嵌套在其父级中）。最后，可以使用单个 div 来跨越 UL 所在的任何元素，并将其居中。

ps - 我使用 .fauxBody 作为包装器 - 请注意。

回复收藏 0 原文

从来不烧饼 2024-11-08 06:42:54

不指定宽度？如果没有在包装上指定宽度，它将是主体的 100%。如果你设置了宽度，你只需要：

#wrapper { width: 960px; margin: 0 auto; }

without specifying a width? Without specifying a width on the wrapper it will be 100% of the body. If you do set a width you only need:

#wrapper { width: 960px; margin: 0 auto; }

回复收藏 0 原文

挽容 2024-11-08 06:42:54

由于 div 是块级元素，因此需要指定其宽度以小于浏览器宽度的 100%。通常，使用定义的宽度，您可以使用margin: 0 auto 0 auto; (top, right, < code>bottom 和 left) 使 div 居中。

如果做不到这一点，您可以使用：

#wrapper {
    display: inline-block;
    margin: 0 auto;
}

这会将 #wrapper div 缩小为其内容的宽度，然后将其置于窗口中心。这与 IE 不兼容< 7、我相信，作为 div 不会，“自然地， ' 有一个 display: inline。

As a div is a block-level element, it needs to have a width specified to take less than 100% of the browser's width. Typically, with a defined width you could use margin: 0 auto 0 auto; (top, right, bottom and left) to centre the div.

Failing that, you could use:

#wrapper {
    display: inline-block;
    margin: 0 auto;
}

Which reduces the #wrapper div to the width of its contents, and then centres it in the window. This is not compatible with IE < 7, I believe, as a div does not, 'naturally,' have a display: inline.

回复收藏 0 原文

~没有更多了~