小编fra*_*rky的帖子

我正在尝试在 vue.js 项目中使用 Bulma 和 flexbox 将图标和文本居中，我尝试遵循此问题的答案（How to Vertical center elements in Bulma?）。我的图标垂直居中，但文本元素似乎偏离中心，其下方有几个像素的空白。它们都在同一基线上，但这意味着它们与我的图标不符（见下图）。

我不确定我哪里出错了，我在下面包含了我的代码，如果有任何帮助，我将不胜感激

 <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', …