如何在瀏覽器中垂直居中標記

即時通訊有一個可怕的麻煩得到一個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>

來源

2012-07-12 James Radford

和類的定義？ – hjpotter92 2012-07-12 10:06:05

很難回答，不知道元素是如何設計的。任何可用的CSS代碼？ – brezanac 2012-07-12 10:07:56

你可能不會像'table'這樣的塊級元素插入到行內元素中（比如你的'a'） – Christoph 2012-07-12 10:22:38

您不能在嵌入元素中嵌套塊級元素，並期望獲得正確的結果。從表中刪除表格然後使用。

a{vertical-align:middle;}

DEMO

來源

2012-07-12 10:07:52

嘿，現在習慣了這種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

來源

2012-07-12 10:08:36

他說跨瀏覽器'display：table-cell'解決方案在下面的IE8中不起作用。 – 2012-07-12 10:11:19

與display:block和平等padding從頂部和底部可能實現這一目標。

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

CSS：

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

來源

2012-07-12 10:16:22

您可以用純CSS2，其作品與所有browswers做到這一點。

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％和邊距必須是半人高的垂直居中對齊方式。

來源

2012-07-30 10:24:28

如何在瀏覽器中垂直居中標記

回答

相關問題