asp.net - 使用 CSS 居中图像的建议

Question

我正在努力将我网站首页上的图片( children 和老师!)居中，有没有更好的方法来做到这一点？大多数显示器都很好，但显然我需要所有人都没事。

我还注意到，当分辨率较低(比如 800x600)时，标题上会出现云朵，就好像浏览器不喜欢 z-index？

网站是:

http://www.huntspillfederation.co.uk/

我的代码是这样的:

 <style type="text/css">

    .stretch {
        width:100%;
        height:100%;
    }
    .stretchw {
        width:100%;
    }
    #cloud1 {
        position: absolute;
        left: 50px;
        top: 50px;
        z-index:4;
    }
    #cloud1 img {
        max-width: 70%;
        height:auto;
    }
    #cloud2 {
        position: absolute;
        right: 50px;
        top: 50px;
        z-index:5;
    }
    #cloud2 img {
        max-width: 70%;
        height:auto;
    }
    .bottom {
    background-image: url("images/hill3.png");
    background-position: left bottom;
    background-repeat: repeat-x;
    position:absolute;
    bottom:0px;
    left:0px;
    width: 100%;
    height: 263px;
    border: none; 
    overflow-x: hidden;
    z-index:6;
    }
    #kids {
        position: absolute;
        left: 30%;
        bottom: 50px;
        z-index:8;
    }
    #kids img {
        max-width: 100%;
        height:auto;
    }
    body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    color: #666;
    background-color: #67b8ed;
    }
    h1 {
    color: #000;
    font-size: 35px;
    font-family:Palatino Linotype;
    font-style:italic;
    text-align:center;
    }
    .maintable {
        z-index:7;
    }
    table.center {
    margin-left:auto; 
    margin-right:auto;
    z-index:8;
    }
    .auto-style1 {
        width: 8px;
    }
</style>

有什么想法吗？

Answer 1

您需要动态增大或减小 div 标记及其中相应图像的大小以满足您的需要。看看 Nathan 的回答并尝试一下。 Height equal to dynamic width (CSS fluid layout)

现在，您的 left:30% 显然不适用于所有视口(viewport)。