3

这是上一个 SO 问题Anchoring CSS Repeating Background Image的后续，但差异很大，可以作为一个单独的问题处理。

jsFiddle http://jsfiddle.net/By2xj/演示了这个概念。我有一个横幅图像（中心），然后需要在左右重复图像，这将根据浏览器窗口的宽度显示和重复。附带条件是左右图像必须锁定在中心横幅图像的边缘。如果您展开 jsFiddle Result 窗口，您可以看到这种效果 - 左右重复图像始终保持锁定在中心横幅图像的一侧并从该点展开。

所以这一切都有效，但我使用了一个表格来实现这个效果，因为在前面的 Stack Overflow 问题中建议的 CSS 并没有完全工作，并且有点依赖于浏览器，特别是不使用旧浏览器。

使用这个基于表格的解决方案，我希望始终保持中心横幅图像居中，即使浏览器宽度小于横幅。如果您减小 jsFiddle Result 窗口的大小，您会看到当浏览器宽度小于横幅时，横幅会保持左对齐而不是居中。

所以我的问题是，即使浏览器宽度小于横幅宽度（并包含表格单元格），我如何才能始终保持中心横幅中心对齐（或者更准确地说，整个表格中心对齐）？

4

3 回答 3

5

这有点作弊，但我希望你在找什么。

http://jsfiddle.net/By2xj/8/

发生的事情是，我在那个中间单元格中创建了一个 div，然后定位绝对，然后将其居中到屏幕。无论浏览器窗口的大小，该 div 都将始终居中。

作为记录：

<table id="banner-table">
    <td id="left-image"></td>
    <td id="center-image"><div></div></td>
    <td id="right-image"></td>
</table>​

CSS：

 #banner-table {

    width: 100%;
    height: 200px;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

#left-image {
    background-image: url(http://www.dummyimage.com/100x200/ff0303/ffffff.png&text=Left);
    background-position: right;
    background-repeat: repeat-x;
}

#center-image {

    width:400px;


}
#center-image div {
    top:0; left:50%;
    margin-left:-200px;
    width:400px;
    height:200px;

    position:absolute;
    background-image: url(http://www.dummyimage.com/400x200/0021fa/ffffff.png&text=Center);
    background-position: center;
    background-repeat: no-repeat;
}
#right-image {
    background-image: url(http://www.dummyimage.com/100x200/1f9900/ffffff.png&text=Right);
    background-position: center center;
    background-repeat: repeat-x;}​
于 2012-07-01T05:45:56.080 回答
1

您可以放弃桌子并使用以下内容：

http://jsfiddle.net/bryandowning/f2unW/

于 2012-07-01T05:56:37.090 回答
0

您需要编辑您的 HTML 代码，如下所示：

<table id="banner-table">
    <td id="left-image"></td>
    <td id="center-image"><div></div></td>
    <td id="right-image"></td>
</table>​

首先，您可以在没有任何 CSS 文件的情况下实现此功能。然后您可以根据需要自定义代码。

于 2012-07-01T08:54:17.683 回答