Html HTML5 和垂直对齐？现在修了吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3568705/
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
HTML5 and vertical-align? Fixed now?
提问by ansiart
I come from the world, and have been looking at resources on google about doing multiple wrappers to vertically align content -- however it seems like it's really ugly.
我来自世界各地，并一直在寻找有关使用多个包装器垂直对齐内容的 google 资源——但它看起来真的很丑。
Is there an easier way now with HTML5? Is there some sort of implementation that uses something like the HBox/VBox mentality? I saw there are examples for non-ie browsers -- is there a compliant way?
HTML5 现在有更简单的方法吗？是否有某种使用类似于 HBox/VBox 心态的实现？我看到有非 ie 浏览器的例子——有没有兼容的方法？
How the heck does anyone in their right mind do HTML now? It's a mess!
现在头脑正常的人是怎么做 HTML 的？一团糟！
//// EDIT
//// 编辑
I've finally figured out how to vertically align an entire box over a screen, how I'm figuring out how to vertically center list items.
我终于想出了如何在屏幕上垂直对齐整个框，我如何弄清楚如何垂直居中列表项。
I've tried two methods to align this html:
我尝试了两种方法来对齐这个 html：
<nav>
<ul>
<li><a href="#!/home">Home</a></li>
<li><a href="#!/link1">Link #1</a></li>
</ul>
</nav>
one using display:inline, the other using float:left (within a container). When using inline, it seems the list items ignore the height: css, and when using float:, the links within the li do not vertically align. Do I need to place div's within the li's to get them to vertically center as well?
一个使用 display:inline，另一个使用 float:left（在容器内）。使用内联时，列表项似乎忽略了 height: css，而使用 float: 时，li 内的链接不会垂直对齐。我是否需要将 div 放在 li 中才能使它们垂直居中？
回答by Goodwine
Why don't you try using display: boxwith box-align:center, this is CSS3, so not every browser supports it yet (only Chrome, FireFox, and Safari)
你为什么不尝试使用display: boxwith box-align:center，这是 CSS3，所以不是每个浏览器都支持它（只有 Chrome、FireFox 和 Safari）
回答by andho
You can make the line-height property equal to the height of the LIs with display:inline-block for the LIs. When you do this the text will be in the middle of the line, the line being the same height of the LI, the text will be vertically in the middle.
您可以使用 display:inline-block 为 LI 设置 line-height 属性等于 LI 的高度。执行此操作时，文本将位于行的中间，该行与 LI 的高度相同，文本将垂直位于中间。
回答by Matt Ball
HTML5 really doesn't have anything to do with element layout, such as vertically aligning content. As before, the markup is styled by CSS.
HTML5 真的与元素布局没有任何关系，例如垂直对齐内容。和以前一样，标记由 CSS 设置样式。
CSS is a totally different spec from HTML5, so no, nothing has changed.
CSS 是与 HTML5 完全不同的规范，所以不，没有任何改变。
If you're having trouble implementing a specific layout, then ask a specific question, and we can probably help out.
如果您在实施特定布局时遇到问题，请提出特定问题，我们可能会提供帮助。
回答by Luca Reghellin
you can set an outer element to display:table and an inner element to display:table-cell. then, on the table-cell element, set vertical-align:middle; all its contents will be vertically centered.
您可以将外部元素设置为 display:table，将内部元素设置为 display:table-cell。然后，在 table-cell 元素上，设置 vertical-align:middle; 它的所有内容都将垂直居中。
It won't work on IE7 and earlier though, but hey, who cares??
虽然它不适用于 IE7 及更早版本，但是嘿，谁在乎？
