Question

我在HTML，CSS方面遇到了问题。我有1个div和2个图像。第一个图像是它的背景，第二个图像是一个我无法带到中心的头像。我尝试使用保证金：0自动;和显示：块;但不行。

Html页面：https://i.stack.imgur.com/vzi9s.jpg

应该如何看待：https://i.stack.imgur.com/WgX6C.jpg

.avatar {
width: 15%;
position:absolute; 
}

.img-home {
width: 100%;
height: 100vh;
}

.content {
float:right;
width:75%;
height: 100rem;
}

HTML：

<div class="content">
  <img src="images/avatar.png" class="avatar">

  <img src="images/bg.jpeg" class="img-home">
</div>

Answer 1

您可以使用以下属性直接使用css设置容器div的背景图像：

background-image: url("paper.gif");

对于头像对齐，我个人使用flex-box。这是一个完整的例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
     .container {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 800px;
         width: 1200px;
         background-image: url("https://images.pexels.com/photos/36744/agriculture-arable-clouds-countryside.jpg?auto=compress&cs=tinysrgb&h=350");
         background-repeat:no-repeat;
         background-size: cover;
     }

     .image{
         width: 300px;
         height: 400px;
     }
    </style>
  </head>
  <body>
    <div class="container">
        <img src="https://www.mercurynews.com/wp-content/uploads/2018/02/craig_03.jpg?w=620" class="image"/>
    </div>
  </body>
</html>

Html，css 2图像在1 div中，对齐不起作用

1 个答案: