在不移动背景颜色的情况下将图像居中对齐答案

【问题标题】：Aligning the image at the center without the background color moving在不移动背景颜色的情况下将图像居中对齐
【发布时间】：2022-01-22 18:27:49
【问题描述】：

抱歉英语不好。您如何将此图像对齐到中心并在页眉和页脚之后的顶部添加空间。 Image Link (bc new user)

如果我尝试了这段代码

margin-left: auto;
margin-right: auto;
width: 50%;

它会移动到中心，但背景也会移动。

我想要的是将图像移动到中心，在页眉和页脚中都有空格。并且背景颜色保持不变。下面是我使用的代码。

HTML

<template>
  <div class="list">
    <headerpc></headerpc>
    <dropdown />
    <div class="main">
      <img src="../home-img/list.png" alt="" />
    </div>
    <div class="count">
      <footerpc></footerpc>
    </div>
  </div>
</template>

CSS

<style scoped lang="scss">
$font-color: #fff;
.list {
    .main {
        position: relative;
        display: block;
        z-index: 1;
        background: #131a28;
    }
    .count {
        background: #131a28;
    }
}
</style>

【问题讨论】：

.main {text-align:center;}
哇哦。我从没想过这会奏效。对于这个大声笑，我真是个愚蠢的人。非常感谢。
也可以看看这篇stackoverflow.com/a/4888157/999011 的帖子了解其他选项。

标签： html css vue.js

【解决方案1】：

您可以尝试为图像指定特定高度并将边距设置为自动。

img{
   width: 300px;
   height: 200px;
   margin: auto;
   }

这将使图像在其容器 div 中沿两个轴居中。

【讨论】：

除非您将 img 分配为 block 或 inline-block 元素，否则不会这样做

【解决方案2】：

要使图像居中，请将左右边距设置为自动并使其成为块元素。在这里，我提供了在中心对齐图像的示例代码供您参考。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:10%
  margin-bottom:10%
}
</style>
</head>
<body>

<h2>Center</h2>
<img src="img_flower.jpg"  style="width:50%;">

</body>
</html>

【讨论】：