How to center an image in vue.js?-CodePudding

I'm trying to do a front of an HTML website by using vue.js, but I wasn't able to center an image using css.

I wrote all of my code in the App.vue file :

<template>
  <div id="container3">
    <img id="teamBackground" src="./assets/bourg_palette_rounded.png" alt="Bourg palette in background" width="360" height="170"/>
  </div>
</template>

<style>
<!-- team -->
#container3 img{
  display:block;
  margin:0 auto;
}
</style>

I tried the text-align and the display-block margin: 0 auto properties but it didn't change neither the placement of the image or the placement of other elements

CodePudding user response：

Have you tried using display:flex; together with justify-content:center;? You can also try out using position:absolute;

You can read more about image-centering methods here: https://www.freecodecamp.org/news/how-to-center-an-image-in-css/

CodePudding user response：

#container3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

you can put those css codes to the parent div