Html，css 1 个 div 中的 2 个图像，对齐不起作用答案

【问题标题】：Html, css 2 images in 1 div, align not workHtml，css 1 个 div 中的 2 个图像，对齐不起作用
【发布时间】：2018-11-25 14:11:15
【问题描述】：

我在 HTML、CSS 中有问题。我在他有 1 个 div 和 2 个图像。第一个图像是背景，第二个图像是头像图像，我无法将其带到中心。我尝试使用 margin:0 auto;和显示：块；但不起作用。

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>

【问题讨论】：

欢迎来到 SO，发布您的代码而不是图片，因为它真的没有帮助。

标签： html css image alignment

【解决方案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>

【讨论】：

np。请注意，flex 容器可能不适用于旧版浏览器。 developer.mozilla.org/en-US/docs/Web/CSS/flex