HTML5 和垂直对齐？现在修好了吗？
我来自世界各地，一直在谷歌上查看有关使用多个包装器来垂直对齐内容的资源 - 然而它看起来真的很难看。
现在使用 HTML5 有更简单的方法吗？是否有某种使用类似 HBox/VBox 心态的实现？我看到有非 ie 浏览器的示例 - 有兼容的方法吗？
现在脑子正常的人到底是怎么写 HTML 的呢？真是一团糟！
//// 编辑
我终于弄清楚如何在屏幕上垂直对齐整个框，如何弄清楚如何垂直居中列表项。
我尝试了两种方法来对齐此 html：
<nav>
<ul>
<li><a href="#!/home">Home</a></li>
<li><a href="#!/link1">Link #1</a></li>
</ul>
</nav>
一种使用 display:inline，另一种使用 float:left （在容器内）。使用 inline 时，列表项似乎忽略 height: css，并且使用 float: 时，li 内的链接不垂直对齐。我是否需要将 div 放置在 li 内以使它们也垂直居中？
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.
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?
How the heck does anyone in their right mind do HTML now? It's a mess!
//// 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:
<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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
为什么不尝试将
display: box与box-align:center结合使用，这是 CSS3，因此并非所有浏览器都支持它（仅 Chrome、FireFox 和 Safari） )http://www.w3schools.com/cssref/css3_pr_box-align.asp
Why don't you try using
display: boxwithbox-align:center, this is CSS3, so not every browser supports it yet (only Chrome, FireFox, and Safari)http://www.w3schools.com/cssref/css3_pr_box-align.asp
您可以使用 LI 的 display:inline-block 使 line-height 属性等于 LI 的高度。当您执行此操作时，文本将位于该行的中间，该行与 LI 的高度相同，文本将垂直位于中间。
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.
HTML5 实际上与元素布局没有任何关系，例如垂直对齐内容。和以前一样，标记由 CSS 设计样式。
CSS 是与 HTML5 完全不同的规范，所以没有，什么都没有改变。
如果您在实现特定布局时遇到困难，请提出特定问题，我们可能会提供帮助。
HTML5 really doesn't have anything to do with element layout, such as vertically aligning content. As before, the markup is styled by CSS.
CSS is a totally different spec from HTML5, so no, nothing has changed.
If you're having trouble implementing a specific layout, then ask a specific question, and we can probably help out.
您可以将外部元素设置为display:table，将内部元素设置为display:table-cell。然后，在表格单元格元素上，设置vertical-align:middle;它的所有内容将垂直居中。
虽然它不适用于 IE7 及更早版本，但是嘿，谁在乎呢？
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.
It won't work on IE7 and earlier though, but hey, who cares??