Aligning the image at the center without the background color moving-CodePudding

Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer. Image Link (bc new user)

If I tried this code

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

it goes to the center but the background also moves.

What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.

HTML

<template>
  <div >
    <headerpc></headerpc>
    <dropdown />
    <div >
      <img src="../home-img/list.png" alt="" />
    </div>
    <div >
      <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>

CodePudding user response：

you can try giving a specific height to the image and set margin as auto.

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

this will center the image along both axes in its container div.

CodePudding user response：

To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.

<!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>