Question

我目前正在将我的网站从表格布局重新设计为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

Answer 1

你有4个，可能有5个解决方案添加到底部，因为它是你原来的不同css和js设置高度的组合：

使用表格单元格并将其内容垂直居中
使用display: table-cell; vertical-align: middle;作为div的css
每次div的高度通过javascript改变时更新margin-top
使用css3 flexbox（您需要使用特定于供应商的扩展程序，因此它不适用于某些旧版浏览器）

使用旧式flexbox的简单示例 - chrome版本 - 添加包装div并将其样式设置为：

#wrapper { display: -webkit-box; -webkit-box-align: center; }
#wrapper > div { margin: auto; }

这个http://jsfiddle.net/gK7YU/

的小提琴

新款flexbox - 也是Chrome版本，您必须添加其他供应商前缀以及最终产品中没有任何前缀的版本。

#wrapper { display: -webkit-flex; }
#wrapper > div { margin: auto; }

这个小提琴：http://jsfiddle.net/LeHRD/

小提琴包含更多css属性，因此您可以轻松查看正在发生的事情。

哦，对不起，你不需要包装div，你可以使用flexbox垂直居中任何内容......好吧，无论如何，我提出的解决方案可以与display: table-cell;结合使用，因此它适用于旧浏览器同样。

您还可以使用指定高度的绝对定位jsfiddle.net/N28AU/1

#wrapper { possition:relative }
#wrapper > div { position:absolute;top:0;right:0;bottom:0;left:0;margin: auto;}

如果你想避免负边距，你可以从包含的元素中计算高度并通过js更新它。

Answer 2

我去过你的网站并在这里复制了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>

您必须在div中包含#box元素，因为如果您没有设置为display: table-cell的包装器元素，display: table属性将无法正常工作。

您的示例：jsfiddle

在块内垂直居中元素

2 个答案: