Question

我需要有关居中div的帮助，或者只是页面中心的背景图片，响应，在所有设备上它会自动居中。

查看页面：

http://185.91.116.132/new/

我尝试用margin-left做这个，但它没有像我想的那样工作，只是想使用像text-align：center;或者我不知道是什么，我是初学者并试图创建一个HTML网页。

我的意思是徽标图片，“MELORCRAFT”带有树木繁茂的背景。（http://185.91.116.132/new/img/logo.png）

Answer 1

将您的徽标包裹在div中，如下所示：

.background {
  position: relative;
  text-align: initial;
}

.logo-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
}

.logo {
  // Same css
}

<div class="background">
  <div class="logo-wrapper">
    <img class="logo" src="logo.png">
  </div>
  
  <!-- other -->
</div>

Answer 2

<img class="logo" src="img/logo.png">

.logo {
    margin: auto 15% auto 15%;
    width: 70%;
}

Answer 3

也许最好的方法是使用弹性盒子。您可以将img（徽标）放入容器中，给出您希望的宽度和高度等图像尺寸，然后设置容器弹性定义，如本示例所示，它应该以所有尺寸为中心

<style>
    .container{ 
width:100%;
height:500px;
background-image:url('your-background-image.jpg');
background-repeat:no-repeat;
background-size:cover;
display:flex;
justify-content: center;
align-items: center;
}


    img{ 
height:200px;
width:300px;
    }
    </style>

</head>
<body>

<div class="container">

       <img src="your-logo.jpg" />

</div>


</body>
</html>

中心图像是div背景

3 个答案: