I'm trying to center an icon and text using Bulma and flexbox in a vue.js project, I tried to follow the answer from this question (How to vertically center elements in Bulma?). My icon vertically centers but the text elements seem to be off-center with a few pixels of white space under them. They are both on the same baseline but means they aren't in line with my icon (see image below).
I'm not sure where I am going wrong, I've included my code below, I'd appreciate any help possible please
<template>
<div class="singleProjectContainer" :key="project.id">
<ul class="columns is-flex projectPreview" style="border-bottom: 0.5px solid #c1c1c1;">
<div class="column is-1 is-flex projectIcon">
<li>
<div v-if="project.projectType === 'Identity'"class="projectIcon" >
<img src="../static/SVG/Identity-Circle.svg" alt="circle icon for branding & identity" />
</div>
</li>
</div>
<div class="projectTitle column is-4">
<li> <h3>{{ project.Name }}</h3> </li>
</div>
<div class="projectSummary column is-7">
<li> <p>{{ project.Summary }}</p> </li>
</div>
</ul>
</div>
</template>
<script>
export default {
name: 'ProjectItem',
props: ['project'],
}
</script>
<style scoped>
.columns {
height: 100%;
padding: 0;
margin: 0;
}
.singleProjectContainer {
height: 72x;
margin: 0px;
}
.columns.projectPreview {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.projectIcon {
padding: 0 0 0 10px;
height: 100%;
}
.projectTitle {
height: 100%;
}
.projectIcon img {
height: 20px;
width: 20px;
}
.projectTitle h3 {
font-size: 1.2em;
font-family: 'Sporting Grotesque_Regular';
color: black;
}
</style>
