I am trying to vertically center my logo, but I have not been successful with using margin: auto or margin: center.
Here is what I have tried so far: ・text-align: center; ・margin: auto; ・margin: center: ・navbar-brand-center
The logo currently appears on the top left corner. When the user clicks on the logo image, it should take them to home.vue (route /).
My current workaround involves using margin:-1.8% 0%, but I understand that this is not an elegant solution.
If you have any suggestions, please advise me.
<b-navbar-brand :to="`/${$i18n.locale}/`">
<img :src="image" class="logo"/>
</b-navbar-brand>
.logo{
width: 50px;
position:absolute;
height: 50px;
margin:-1.8% 0%;
}
I would like to change from ↓https://i.stack.imgur.com/cNp0d.png
To this ↓ https://i.stack.imgur.com/XNfbP.png
Full code below
<template>
...
</template>
<script>
import image from "../assets/Logo.jpg"
export default {
name: "Header",
data() {
return {
image: image
};
},
methods: {
...
},
computed: {
...
}
};
</script>
<style>
#header {
background-color: cornflowerblue;
}
.logo{
width: 50px;
position:absolute;
height: 50px;
margin:-1.8% 0%;
}
@media screen and (max-width: 891px) {
.center {
position: relative !important;
}
}
.center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>