How do vertically align a Bulma Button in a line of text?

Question

So I'm using Bulma via the CDN, have an <h2> tag with a <button> tag within it:

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

But this is what it renders as:

What classes on the button do I need so it aligns vertically with the text?

Bradski

Answer 1

I know this is old, but since this is the first result that popped up for me, the classes you're looking for involve the level layout classes. This the link to the documentation with examples. Fundamentally, though, you'd wrap your content in a level container, and then use level-item to align them vertically across the container. You can use other classes to size the content. This is one way to solve your problem. There are others, of course:

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

Doom

Thanks. If you do not want to stretch the whole line, add style="display: inline-flex;" to the div. – Shandra

Answer 2

Here is the answer I think

Also you can search about baseline property in css

Rheotaxis