Question

我对编码不是很好。我从谷歌搜索中获取了这个代码，因为我想创建一个非常简单的启动页面，它具有响应性。

问题是我想在另一个图像下放置另一个图像，但是下一个图像会在第一个图像的上方居中。

有人可以向我解释如何做到这一点吗？

祝你好运安德斯

theme.css：

<style type="text/css">

#bg {
position:fixed;
top:0;
left:-50%;
width:200%;
height:75%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:30%;
min-height:30%;
}

</style>

的index.html：

<!DOCTYPE html>
<html>
<head>
  <title>Childhood Projects</title>
  <link rel="stylesheet" type="text/css" href="theme.css">

</head>
<body>

<div id="bg">
<img src="cp.gif" id="back1" alt="Childhood Projects" width="42"/>
</div>
<div>

</body>
</html>

非常感谢 -Anders

Answer 1

试试这个CSS：

#bg {
position:fixed;
top:0;
left:-50%;
width:200%;
height:75%;
}
#bg img {
    float: left;
    width: 100%;
}

Answer 2

如果可能，请不要使用position: absolute;。

同样margin:auto;将水平居中每个图像，以便您可以将其删除或设置为基于像素的值。

#bg img {
  position:static;
  margin:20px;
  min-width:30%;
  min-height:30%;
}

如何在此超级对齐图像下添加文本或其他图像：HTML / CSS

2 个答案: