1

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 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>
isuckatcoding_
  • 13
  • 2

2 Answers2

0

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.

Tauheed07
  • 23
  • 5
0

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>
pooja
  • 81
  • 3