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中删除表，然后使用。

a{vertical-align:middle;}

<强> DEMO

Answer 2

嘿，现在已经习惯了这个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做到这一点，它适用于所有的浏览器。

Here is jsFiddle example, try to change browser's height and you will inspect its always being vertical centered to window.

我假设您的.x容器高度为100px：

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

顶部css应为50％，margin-top必须是垂直对齐中心方法高度的一半。

如何跨浏览器垂直居中标记

4 个答案: