为什么 CSS 中没有浮动中心?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15330689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:58:59  来源:igfitidea点击:

Why is there no float center in CSS?

csscss-float

提问by Kevin Cox

I have found that there is no float center in CSS and I was a little disappointed. However, I can't help but ask myself why. While many people want to use this for centering content I wished to use it to float a bunch of blocks into rows on a dynamic page size. Unfortunately without a float center it looks sloppy as there is extra space (whatever fraction of a full block doesn't fit) on one side. It makes me sad that the intended use of floats is hurt by this property missing.

我发现 CSS 中没有浮动中心,我有点失望。但是,我不禁问自己为什么。虽然很多人想用它来居中内容,但我希望用它来将一堆块浮动到动态页面大小的行中。不幸的是,如果没有浮动中心,它看起来很草率,因为一侧有额外的空间(整个块的任何部分都不适合)。让我感到难过的是,浮动的预期用途因缺少此属性而受到损害。

I can't see a reason why there isn't a float center and was wondering if anyone had reasons, either technical or otherwise why a float center was not included in the standard.

我看不出没有浮动中心的原因,想知道是否有人有理由,无论是技术原因还是其他原因,为什么标准中不包括浮动中心。

采纳答案by albert

there is no float center because floats take elements out of the content flow and position them as far left/right as possible. floats by themselves only move things sideways. not 100% on this last part, but i reckon it has something to do with print. i know the idea of floats was taken from the print industry.

没有浮动中心,因为浮动将元素从内容流中取出并尽可能地向左/向右放置。浮动本身只会将东西移到一边。最后一部分不是 100%,但我认为它与印刷有关。我知道花车的想法来自印刷行业。

回答by Explosion Pills

Instead of using float: left, use display: inline-blockon the individual elements and center their container.

不要使用float: left,而是display: inline-block在单个元素上使用并使其容器居中。

http://jsfiddle.net/ExplosionPIlls/rAkNY/5/

http://jsfiddle.net/ExplosionPIlls/rAkNY/5/

回答by Krish

Yes, There is not Float center/middle and may the W3C having the answer.

是的,没有浮动中心/中间,W3C 可能有答案。

There is <center>tag but no-longer.

<center>标签但没有了。

The <center>tag is deprecated as of HTML 4, and using it creates a few different issues. HTML centered elements can display differently in different browsers, and using the tag can increase page load time. Also, heavy use of will complicate your site redesigns — removing hundreds of tags takes a lot longer than changing one style rule in a stylesheet.

The tag was officially deprecated many, many years ago, but it is still recognized by most browsers through their backward-compatibility features. So yeah, if you something, it'll be centered. However, in the interest of future-proofing you should use modern CSS centering methods instead.

<center>HTML 4 开始不推荐使用该标签,使用它会产生一些不同的问题。以 HTML 为中心的元素在不同浏览器中的显示方式不同,使用标签会增加页面加载时间。此外,大量使用 会使您的站点重新设计变得复杂——删除数百个标签比更改样式表中的一个样式规则花费的时间要长得多。

许多很多年前,该标签已被正式弃用,但大多数浏览器仍通过其向后兼容性功能识别它。所以,是的,如果你有什么,它会居中。但是,为了面向未来,您应该改用现代 CSS 居中方法。

Use margin:0 auto;

margin:0 auto;

If you're centering something else, margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)

如果您将其他东西居中,margin: 0 auto; 大部分时间都会让你的元素居中。(快速说明:您的元素必须具有声明的宽度才能使其工作。)

The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.

保证金:0自动;rule 是 0 上边距和下边距以及自动左右边距的简写。自动左边距和右边距一起工作以将元素推入其容器的中心。

回答by Robert

If you want to center contents:
1. set css property display: inline-blockor inlineto each content item.
2. set css property text-align:centerto their parent node.

如果要居中内容:
1. 设置 css 属性display: inline-blockinline到每个内容项。
2. 将 css 属性text-align:center 设置为其父节点。