HTML表:无论浏览器宽度如何,都保持中心对齐

Question

这是来自之前的SO问题的后续问题.锚定CSS重复背景图像但是完全不同以作为单独的问题处理.

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

所以,这一切都是工作,但我使用了一个表来达到这种效果,因为CSS在之前的堆栈溢出的问题并没有完全工作建议,是有点依赖于浏览器,特别是不与旧的浏览器播放.

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

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

Answer 1

它有点作弊,但我希望你在寻找什么.

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;}?