如何在 Bulma 中垂直居中文本和图标？

Question

我试图在 vue.js 项目中使用 Bulma 和 flexbox 使图标和文本居中，我试图遵循这个问题 () 的答案。我的图标垂直居中，但文本元素似乎偏离中心，下方有几个白色像素 space。它们都在同一基线上，但这意味着它们与我的图标不一致（见下图）。

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

 <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>

Answer 1

.is-vcentered 选择器仅与 columns 相关： https://bulma.io/documentation/columns/options/#vertical-alignment

.columns.is-vcentered {
    align-items: center;
}

布尔玛 >= 0.9.1

从 Bulma 0.9.1 开始我们可以使用 flexbox helpers:

Combined with is-flex, all of the Flexbox CSS properties are available as Bulma helpers:

flex-direction

flex-wrap

justify-content

align-content

align-items

align-self

flex-grow

flex-shrink

示例：

<div class="is-align-items-center is-flex"></div>

片段：

<div class="container">
  <ul class="list">
    <li class="box list-item is-flex is-align-items-center  ">
      <span class="icon has-text-danger">
        <i class="fas has-text-success fa-2x fa-adjust"></i>
      </span>
      <h2 style="margin-left: 10px; font-size: 60px;  line-height: 1;">Hello world</h2>
      <h3 style="margin-left: auto;">Right text</h3>
    </li>
    <li class="box list-item  is-flex is-align-content-center">
      <span class="icon has-text-danger">
        <i class="fas has-text-danger fa-2x fa-exclamation-triangle"></i>
      </span>
      <h2 style="margin-left: 20px; font-size: 20px;">Item 2</h2>
      <h3 style="margin-left: auto;">Right text</h3>
    </li>
  </ul>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

布尔玛 < 0.9.1（旧答案）

对于列表 - 否“内置”方式（由助手）对齐图标和文本（尚未）。一种解决方案 - 使用核心 is-flex 和 one CSS 自定义样式（对于 align-items: center;）。

片段：

/* one custom class (not from bulma core) */
li.vcenter{
  align-items: center;
}

<div class="container">
  <ul class="list">
    <li class="list-item is-flex vcenter">
      <span class="icon has-text-danger">
        <i class="fas has-text-success fa-2x fa-adjust"></i>
      </span>
      <h2 style="margin-left: 10px; font-size: 60px;  line-height: 1;">Hello world</h2>
      <h3 style="margin-left: auto;">Right text</h3>
    </li>
    <li class="list-item  is-flex vcenter">
      <span class="icon has-text-danger">
        <i class="fas has-text-danger fa-2x fa-exclamation-triangle"></i>
      </span>
      <h2 style="margin-left: 20px; font-size: 20px;">Item 2</h2>
      <h3 style="margin-left: auto;">Right text</h3>
    </li>
  </ul>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.2/css/bulma.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

相关：How to center text vertically with a large font-awesome icon?

如何在 Bulma 中垂直居中文本和图标？

How do I vertically center text and icons in Bulma?

html

css

vue.js

flexbox

bulma

布尔玛 >= 0.9.1

布尔玛 < 0.9.1（旧答案）