2

我在让一段 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>
4

4 回答 4

0

您可以使用纯 css2 执行此操作，它适用于所有浏览器。

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

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

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

顶部 css 应该是 50% 并且 margin-top 必须是垂直对齐中心方法高度的一半。

于 2012-07-30T10:24:28.510 回答
0

You can't nest block-level elements inside of inline elements and expect to get proper results . Remove table from a and then use.

a{vertical-align:middle;}

DEMO

于 2012-07-12T10:07:52.323 回答
0

从顶部display:block和padding底部开始，你可以做到这一点。

见演示：http: //jsfiddle.net/akhurshid/gqwSX/4/

CSS：

a {    
    display:block;
    padding: 50px;    
}​
于 2012-07-12T10:16:22.023 回答
0

嘿，现在习惯了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/

于 2012-07-12T10:08:36.807 回答