如何在浏览器之间垂直居中标记

Question

我在将一段html垂直居中时遇到了可怕的麻烦。代码如下。超链接中的内容需要垂直对齐，但我不知道如何对齐。请帮忙吗？！非常感谢

<a class="x" href="#">
    <span class="time">xxxx</span>
    <span class="time">yyyy</span>
    <span class="time">zzzz</span>
    <table>
    <tr>
      <td>
         <span class="Test">
           <span>HELLO</span>
         </span>
      </td>
    </tr>
    </table>
</a>

Answer 1

您不能在内联元素中嵌套块级元素并期望得到正确的结果。从中删除表，然后使用。

a{vertical-align:middle;}

DEMO

Answer 2

Hey现在习惯了这个display:table-cell并给vertical-align middle

就像这个

.x{
border:solid 10px red;
  display:table-cell;
  height:200px;
  width:300px;
  vertical-align:middle;
  text-align:center;
}

现场演示http://tinkerbin.com/XIT6R38u

更多信息http://css-tricks.com/centering-in-the-unknown/

Answer 3

使用display:block和从上到下相等的padding，您可以实现这一点。

请参阅演示：http://jsfiddle.net/akhurshid/gqwSX/4/

CSS:

a {    
    display:block;
    padding: 50px;    
}​

Answer 4

您可以使用纯css2来实现这一点，它适用于所有浏览器。

这里是jsFiddle的例子，尝试更改浏览器的高度，您将检查它始终垂直居中于窗口。

我推测你的.x容器有100px的高度：

.x { position:fixed; top:50%; height:100px; margin-top:-50px; }

顶部css应该是50%，页边空白顶部必须是垂直对齐中心方法高度的一半。