代码之家 › 专栏 › 技术社区 › ansiart

HTML5和垂直对齐?现在修理好了吗?

vertical-alignment css3 html5

10

ansiart · 技术社区 · 14 年前

我来自世界各地,一直在寻找谷歌的资源,研究如何做多个包装来垂直对齐内容——不过,这看起来确实很难看。

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中以使它们垂直居中?

4 回复 | 直到 12 年前

1

11

Goodwine 13 年前

你为什么不试着用 display: box 具有 box-align:center ,这是CSS3,所以不是每个浏览器都支持它(只有Chrome、Firefox和Safari)

2

4

andho 13 年前

可以使用display:inline块将line-height属性设置为等于lis的高度。当你这样做的时候,文本将在直线的中间,线是相同的高度的Li,文本将垂直在中间。

3

1

Matt Ball 14 年前

HTML5实际上与元素布局没有任何关系,比如垂直对齐内容。和以前一样,标记是由CSS设计的。

CSS和HTML5是完全不同的规范,所以没有,什么都没有改变。

如果您在实现一个特定的布局时遇到困难,那么请提出一个特定的问题,我们可能会提供帮助。

4

1

Luca Reghellin 13 年前

可以设置要显示的外部元素:table和要显示的内部元素:table cell。然后,在table cell元素上,设置垂直对齐:中间;其所有内容将垂直居中。

不过,在IE7和更早版本上不起作用,但嘿,谁在乎呢??