HTML表格：无论浏览器宽度如何，保持居中对齐

Question

HTML表格：无论浏览器宽度如何，保持居中对齐

3

这是一个关于编程的问题，和之前的Stack Overflow问题Anchoring CSS Repeating Background Image有所不同，需要单独解决。

jsFiddle http://jsfiddle.net/By2xj/ 展示了这个概念。我有一张横幅图片（中心），需要在左右两侧重复显示图片，根据浏览器窗口的宽度进行重复。前提条件是左右两侧的图片必须锁定在中心横幅图像的边缘上。如果您扩大 jsFiddle 结果窗口，您可以看到这种效果 - 左右重复的图像始终保持锁定在中心横幅图像的侧面，并从该点扩展出去。

所以所有这些都有效，但我使用了表格来实现这个效果，因为先前的 Stack Overflow 问题中建议的 CSS 并没有完全起作用，并且在旧的浏览器中存在兼容性问题。

通过这个基于表格的解决方案，我希望始终将中心横幅图像居中对齐，即使浏览器宽度小于横幅。如果你缩小jsFiddle结果窗口的大小，你会发现当浏览器宽度小于横幅时，横幅会粘在左对齐而不是居中对齐。

所以我的问题是，无论浏览器宽度是否小于横幅宽度（和包含表格单元格），如何始终保持中心横幅居中对齐（或者更正确地说，整个表格都居中对齐）？

- Skoota

横幅只是一张图片吗？你可以将它设置为 background-image：http://jsfiddle.net/userdude/YgJh9/ - Jared Farrish

3个回答

1

你可以放弃使用表格，改用类似这样的东西：

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

- Bryan Downing

谢谢您的建议，但是左侧图形不再锁定在中心图形的右侧。不过，如果您有其他无表格的建议，我一定会欣然接受 :) - Skoota

谢谢更新 :) 我真的希望这个能够完成工作，但不幸的是有一个主要问题在我的jsFiddle中并不明显。在你的实现中，左右背景在中心横幅下平铺 - 我不能让这种情况发生，它们需要分别从横幅的左右边缘开始。这个jsFiddle展示了问题 - http://jsfiddle.net/cCEEV/。我不知道有没有办法解决这个问题? :) - Skoota

еҪ“з„¶пјҢжӮЁжүҖйңҖеҒҡзҡ„еҸӘжҳҜдҝ®ж”№background-positionеұһжҖ§гҖӮжҲ‘е·Іжӣҙж–°fiddleгҖӮдҪҝз”Ё-200px 0pxжқҘд»ЈжӣҝleftпјҢе№¶дҪҝз”Ё200px 0pxд»ЈжӣҝrightгҖӮ - Bryan Downing

谢谢更新，Bryan。但现在左侧不再锁定在中心图形的左侧了。此外，右侧（以及可能也是左侧）只是看起来有效，因为图形的尺寸足以在中心图形下面平铺两次，然后才出现像锁定在中心图形一侧的效果。实际图形的尺寸与此相当不同，这样做是行不通的 - 左侧和右侧的图形实际上需要从中心图形的侧面开始。 - Skoota

你试过用你的图形吗？无论重复图形的复杂程度如何，它都应该正常工作。将“background-position”值更改为不可被100整除的值，你就会明白我的意思了。这就是为什么我让中心图形半透明。除非我完全错过了什么。 - Bryan Downing

嗨，Bryan。我认为我们的谈话存在误解。例如，横幅的左边缘被设计成与左侧重复图形的右边缘相邻，因为这两个图形需要彼此融合在一起。这就是为什么它们需要相邻而不是在中心图形下方重复然后在某个点出现的原因。这样说清楚了吗？ - Skoota

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文件的情况下实现此功能。然后，您可以根据自己的需求自定义代码。

- Polash

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- eringen · Accepted Answer

虽然有些作弊，但我希望这是你想要的。

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