我目前正在将我的网站从表格布局重新设计为CSS.我在看似非常简单的任务时遇到了一些问题.
该网站很简单.屏幕中间的一个框,其中包含多个链接.
旧网站使用< td valign =“center”>将框中的所有链接居中. CSS似乎没有等价物.我一直使用负边距将元素集中在一起,如下所示：
div {
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px;
}
当您确切知道要居中的元素有多大时,这种方法很有效,但我需要能够在不知道链接占用多少垂直大小的情况下使链接居中.我只是希望框中的对齐方式像text-align：center.也只是垂直的.
Current website designed with tables
Current progress on the CSS version
解决方法
我去过你的网站并在这里复制了html.
你可以这样做：
<style> #Box{ display: table; } #Box > div { display: table-cell; vertical-align: middle; } </style> <!-- Your html part --> <div id="Box"> <div> <a href="#">Link A</a> <a href="#">Link B</a> <a href="#">Link C</a> <a href="#">Link D</a> </div> </div>
您必须在#Box中包含div元素,因为如果您没有设置为display：table的包装元素,则display：table-cell属性将无法正常工作.
你的例子：jsfiddle
