Vue JS Align Center Image
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.

written

reviewed

updated

Thanks for your feedback!
Your contributions will help us to improve service.
VueJs Align Image Center Example | Css
VueJs Example
Copied to Clipboard
xxxxxxxxxx
<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 -
Ad