8

我目前正在将我的网站从表格布局重新设计为 CSS。我在看似非常简单的任务中遇到了一些问题。

该网站很简单。屏幕中间的一个框，其中包含多个链接。

旧站点用于<td valign="center">将框中的所有链接居中。CSS 似乎没有等价物。我一直在使用负边距使元素居中，如下所示： 

div {
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}

当您确切知道要居中的元素有多大时，这很好用，但是我需要能够在不知道链接占用多少垂直大小的情况下使链接居中。我只希望框中的对齐方式像text-align: center. 也只是垂直的。

当前使用表格设计的网站
CSS 版本的当前进展

4

2 回答 2

6

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

  • 使用表格单元格并将其内容垂直居中
  • display: table-cell; vertical-align: middle;用作 div 的css
  • 每次通过javascript更改div的高度时更新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 更新它。

于 2012-10-09T02:20:22.427 回答
4

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

于 2012-10-09T02:29:47.480 回答