html - 如何使我的 CSS 包装器的宽度相对于显示器的大小？

Question

我正在尝试使用 CSS 将 Logo 置于我的 HTML 页面顶部的中央。我创建了一个包装器，但不是固定宽度，有没有办法使宽度相对于屏幕尺寸？如果我将宽度分配给固定像素以外的任何东西，我的图像就会紧贴屏幕左侧(并且在其他屏幕上看起来会很时髦)。

这是我的代码:

#wrapper {
    background-color: #000;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
}
#wrapper #logo {
    height: 292px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: block;
    margin: 0 auto;
}

显然， Logo 仅在浏览器宽度为 800 的屏幕上居中。因此在我的 1024 宽度显示器中，它向左倾斜。

有人知道我需要做什么吗？

谢谢!

编辑:仍然没有以这段代码为中心:

http://jsfiddle.net/mFj3W/

有什么想法吗？

Answer 1

您可能希望为宽度分配百分比而不是固定像素宽度。

http://jsfiddle.net/FKQFX/