Html 在CSS中居中和缩放图像集-可能吗？

嘿，大家好-我正试图将两张图片放在一起。为了“易于使用”，我可能更谨慎地将这两个图像合并在一起，但现在我有两个图像-文本（logo.png）和表单（form.png）。我想让它们看起来像这样，几乎是在彼此的顶部对齐，并让它们在屏幕上居中，希望它们能够根据屏幕大小进行缩放和居中

有没有一个简单的方法，我忽略了这一点？这是我的图片和CSS：（很抱歉，我没有现场演示，因为我的示例在本地服务器上-但如果可能有帮助的话，我可以上传这两个）

该图像有些临时性，但尺寸保持不变

有了这段代码，我的目标是根据屏幕大小将图像居中，并相应地进行缩放。它在我的显示器上运行良好，但在我的小型笔记本电脑上会偏离中心

非常感谢您的帮助

---

（另外，目前没有标记，我在index.html文件中的

标记中有此代码）

我相信您已经知道了，但是您不能指望CSS3支持，除非您碰巧知道您的所有访问者都将使用最新的浏览器，因此后台路径可能不是解决方法

也就是说，由于您为

元素指定了固定的大小和固定的顶部和左侧边距，因此当视口的大小不同时，它们当然会移动。仅供参考，由于您将它们设置为绝对位置，因此您可以使用

左

、

右

、

顶部

、和

底部

属性而不是边距，即

顶部：-210px和
左侧：-175px

如果要将#main水平居中，请将“自动”值用于左值和右值：

margin: 15% auto <<whatever_bottom_should_be>>

保证金：15%自动

或

保证金：15%自动->顶部和底部的值相同，左侧和右侧的值相同

这将告诉浏览器将可用空间平均分割到两侧边距。
如果希望将它们居中，可以使用：

html{
宽度：100%；
保证金：0px自动；
}

#主要{
宽度：875px；
高度：350px；
背景：url（images/form.png）0 0无重复；
保证金：0px自动；
z指数：1；
}

#主要形式{
宽度：1014px；
高度：228px；
背景：url（images/logo.png）0 0无重复；
保证金：0px自动；
z指数：2；
}

不过，请告诉我们，这是否是您所追求的。通常，如果是两个不同的div标记，则此设置可以正常工作。
给你。我为您创建了布局

检查工作示例
离题意见：也许删除“真的”这个词？嗯，如果我改变其中一个的边距，这似乎会将徽标和表单一起移动…徽标似乎“附加”到表单上。
margin: 15% auto <<whatever_bottom_should_be>>

body{
    color:white;
}
.logo{
    background:black;
    width:100px;
    height:50px;
    clear:both;
}

.menu{
    position:relative;
    z-index:1;
    margin:40px auto 0px auto;
    background:gray;
    width:400px;
    height:50px;
    clear:both;
}

.form{
    position:relative;
    z-index:0;
    margin:-25px auto 0px auto;
    background:red;
     width:500px;
     height:250px;
     clear:both;
}