[英]How do I vertically center text and icons in Bulma?
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? ).我正在尝试在 vue.js 项目中使用 Bulma 和 flexbox 将图标和文本居中,我试图遵循这个问题的答案( 如何在 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>
.is-vcentered
selector related only to columns
: https://bulma.io/documentation/columns/options/#vertical-alignment .is-vcentered
选择器仅与columns
相关: https://bulma.io/documentation/columns/options/#vertical-alignment
.columns.is-vcentered {
align-items: center;
}
Since Bulma, 0.9.1 we can use flexbox helpers :由于布尔玛,0.9.1 我们可以使用flexbox 助手:
Combined with
is-flex
, all of the Flexbox CSS properties are available as Bulma helpers:结合is-flex
,所有 Flexbox CSS 属性都可用作 Bulma 助手:
- flex-direction弹性方向
- flex-wrap弹性包装
- justify-content证明内容
- align-content对齐内容
- align-items对齐项目
- align-self对齐自我
- flex-grow弹性成长
- flex-shrink伸缩收缩
Example:例子:
<div class="is-align-items-center is-flex"></div>
Snippet:片段:
<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">
For lists - No "built-in" way (by helpers) to align icons and text (yet).对于列表 -没有“内置”方式(通过助手)来对齐图标和文本(还)。 One solution - use core is-flex
and one CSS custom style (For align-items: center;
).一种解决方案 - 使用核心is-flex
和一种CSS 自定义样式(对于align-items: center;
)。
Snippet:片段:
/* 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">
Related: How to center text vertically with a large font-awesome icon?相关: 如何使用大字体真棒图标垂直居中文本?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.