如何垂直对齐内容而不嵌套其他容器？ [英] How to vertically align content without nesting additional containers?

问题描述

我在将容器中的物品垂直对齐时遇到了很多麻烦。

我实施了大量的建议。所有人都建议将内容封装在另一个div或容器中。

由于各种原因导致各种问题，我不会进入，但我想选择一个新的要求：它不包裹另一个容器。

这导致我的解决方案（styles inline为简洁）：

 < div style =display：table-cell; vertical-align：middle> my content< / div> 
  

或：

 < td style =vertical-align：middle>我的内容< / td> 
  

我喜欢第一个选项多于第二个，因为第二个你排序，有一个表单元格在这个独立于表格的其他内容的中间？

我犹豫使用第一个选项的原因是因为我不确定它将在所有浏览器中工作。我可以说同样的第二个选项。

哪些选项在语义和浏览器支持方面更好？

解决方案

p>要垂直居中内容，而不嵌套其他封装容器，您只需使用 flexbox 。

CSS pre> div {
display：flex;
align-items：center; / *中心内容垂直，在这种情况下* /
justify-content：center; / *中心内容水平，在这种情况下（可选）* /
}


< > HTML

 < div>我的内容< / div> 
  

DEMO

请注意，虽然div中的文字似乎没有容器，成为一个弹性容器，文本将包装在匿名容器中成为flex项目。这是CSS的工作原理。如果您不在HTML元素中封装内容，CSS将创建匿名封锁或内嵌框。

---

>

我喜欢第一个选项多于第二个，因为第二个你
排序，为什么有一个表单元格在这个其他
内容的中间是独立的表？

我犹豫使用第一个选项的原因是因为我

<














p>从功能角度来看，没有区别：

 < div style =display：table-cell; >我的内容< / div> 
  

及

 < td>我的内容< / td> 
  

两个做同样的事情。原因如下：

HTML元素，包括 div 和 td ，在浏览器使用显示值。 htmlrel =nofollow> default stylesheet 。

因此，a td 类似表单元格的行为是因为浏览器的默认样式表指定 td {display：table-cell; } 。

通过覆盖 div 浏览器的 display：block 与您自己的 display：table-cell 。

$ b b

所以在功能和所有玩家方面都是一样的。 div ， td ， display：table-cell code> vertical-align：middle 是所有浏览器支持回到最少为IE6。

但是，flexbox的浏览器支持尚未完成。 Flexbox（CSS3）受所有主要浏览器支持， IE 8& 9 。某些最新的浏览器版本（例如Safari 8和IE10）需要供应商字首 。要快速添加您需要的所有前缀，请在此处发布您的CSS： Autoprefixer 。

---

作为旁白：

HTML元素没有内置样式。换句话说，标签名
本身不带有样式。直到他们通过浏览器，显示和其他CSS属性应用。 （请参阅 HTML默认
样式表。）

根据此 MDN错误
报告，它
似乎是盒子的唯一的HTML元素是基于
在它们的标签名上构造的< button> code>< fieldset> 和< legend> 。

I've been having a lot of trouble with vertically aligning an item in its container.

I've implemented plenty of suggestions. All of them suggest wrapping the content in another div or container.

This has caused all sorts of issues for various reasons I won't get into but I would like to choose a new requirement: That it not be wrapped in another container.

That lead me to this solution (styles inline for brevity):

<div style="display:table-cell;vertical-align:middle">my content</div>

Or this:

<td style="vertical-align:middle">my content</td>

I like the first option more than the second because with the second you sort of go, "why is there a Table Cell in the middle of this other content that is independent of a table?"

The reason I'm hesitant to use the first option is because I'm not sure it will work in all browsers. I could say the same about the second option as well.

Which option is better in terms of semantics and browser support?

解决方案

To vertically center content, without nesting additional wrappers, you can simply use flexbox.

CSS

div {
    display: flex;
    align-items: center;       /* center content vertically, in this case */
    justify-content: center;   /* center content horizontally, in this case (optional) */
}

HTML

<div>my content</div>

DEMO

Note that although the text in the div appears to not have a container, technically when the div becomes a flex container the text becomes wrapped in an anonymous container that becomes the flex item. This is how CSS works. If you don't wrap your content in an HTML element, CSS will create anonymous block or inline boxes.

---

You wrote:

I like the first option more than the second because the second you sort of go, "why is there a Table Cell in the middle of this other content that is independent of a table?

The reason I'm hesitant to use the first option is because I'm not sure it will work in all browsers. I could say the same about the second option as well.

From a functional perspective, there is no difference between:

<div style="display:table-cell;">my content</div>

and

<td>my content</td>

Both do the same thing. Here's why:

HTML elements, including div and td, have no display value until the browser applies styles with the default stylesheet.

Hence, the only reason a td acts like a table cell is because the browser's default stylesheet specifies td { display: table-cell; }.

You're doing the same with the div, by overriding the browser's display: block with your own display: table-cell.

So it's really the same thing in terms of functionality and all players – div, td, display: table-cell and vertical-align: middle are supported by all browsers going back to at least IE6.

Browser support for flexbox, however, is not yet complete. Flexbox, which is CSS3, is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS here: Autoprefixer.

---

As an aside:

HTML elements have no inherent styling. In other words, the tag names themselves don't carry styles. It isn't until they go through the browser that display and other CSS properties are applied. (See an HTML Default Stylesheet.)

Based on this MDN Bug Report, it appears that the only HTML elements who's boxes are constructed based on their tag name are <button>, <fieldset> and <legend>.

这篇关于如何垂直对齐内容而不嵌套其他容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！