使用CSS居中图像的建议

Question

我很难将我网站首页上的图片居中（孩子和老师！），有更好的方法吗？大多数显示器都很好，但显然我需要所有人都好。

我还注意到，当分辨率较低（比如800x600）时，云会出现在标题上，就好像浏览器不喜欢z索引一样？

网站是：

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的答案，试试看。高度等于动态宽度（CSS流体布局）

现在，你的左边：30%显然不适用于所有视口。

Answer 2

解决问题的一个更简单的方法是在正确对齐时下载整个背景图像。。然后将其用作宽度为100%、高度为100%的身体标签的背景图像：P