Vue JS Align Center Image using css. You can use css class to align an image in vue js component. Here in this example we are going to explain how you can align an image to center in component.
VueJs Align Image Center Example | Css
VueJs Example
<template>
<div class="container-div">
<div class="center-image">
<img src="https://www.sarkarinaukriexams.com/images/editor/1669983614apprentice.PNG" width="350" height="150" />
</div>
</div>
</template>
<style>
.center-image {
width: 350px;
}
.container-div {
width: 100%;
border: 2px solid #333;
padding: 10px 0px;
}
.container-div .center-image{
margin: 0 auto;
}
</style>
Make sure you have wrapped image with container div and class “center-image”
Using above example you can center any image inside any container.
Output of above example will look something like this –
