如何在文本行中垂直对齐Bulma按钮？

Question

我正在通过CDN使用Bulma，其中包含一个带有<button>标签的<h2>标签： <h2 class="title is-size-2-mobile is-3 has-text-white">第一步：在菜单中选择想要学习的卡片和/或备忘单<button class="button mt-10 has-background-success has-text-info has-text-centered is-vcentered ml-10 mr-10">备忘单</button>.</h2> 但它呈现为以下内容： 我需要在按钮上添加哪些类才能将其与文本垂直对齐？

- Bob Walsh

Answer 1

我知道这是老的内容，但因为这是我搜索到的第一个结果，你要寻找的类别涉及于level布局类。 这是提供示例的文档链接。然而，基本上，你会将你的内容包装在一个level容器中，然后使用level-item将它们在容器内垂直对齐。你可以使用其他类别对内容进行大小调整。这是解决您问题的一种方法。当然还有其他的方法：

<div class="level">
<h2 class="title is-size-2-mobile is-3 has-text-white level-item">
Step 1: Pick which Cards and/or Cheatsheets you want to learn from the 
<button class="button mt-10 has-background-success has-text-info has-text-centered is-vcentered mx-1 level-item">Cheatsheets</button> 
in the menu.</h2>
</div>

- Kevin

---

谢谢。如果你不想拉伸整行，可以在 div 标签中添加 style="display: inline-flex;"。 - David

Answer 2

这是我认为的答案

另外，你可以搜索关于css中baseline属性的内容。

- jad