Bulma - 如何使文本和图像内联或彼此相邻？

Question

我在我的项目中使用 Bulma。

基本上，我正在尝试height: 25em使用 Bulma将 text 和 image( ) 内联。但它没有发生。

到目前为止，我试过这个：

.img-cont {
  width: 50%;
  float: left;
}

img {
  height: 25em;
}

.clearfix {
  clear: left;
}

.content {
  float: right;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" type="text/css" rel="stylesheet">

<div class="container is-info">
  <div class="img-cont">
  <img src="https://i.imgur.com/Pyp4DwX.png" alt="">
  </div>
  <div class="clearfix"></div>
  <div class="content has-text-centered">
    <span class="title">MEDAL</span><br>
    <span class="subtitle">Loren Ipsum Dolar Sit Amet.</span>
  </div>
</div>

正如您所看到的，文本内容不会垂直居中，而是始终位于底部。

那么，我该如何解决这个问题并实现我想要的外观呢？

Answer 1

Bulma 是基于 Flexbox 的布局，因此请使用它为您提供的工具。我已更新您的代码段以包含 Bulma's columns。如果您希望它们在较窄的视口中彼此堆叠，请删除is-mobile该类（在此处查看更多信息）。

img {
  height: 25em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" type="text/css" rel="stylesheet">

<div class="columns is-mobile is-centered is-vcentered">
  <div class="column">
    <img src="https://i.imgur.com/Pyp4DwX.png" alt="">
  </div>
  <div class="column">
    <span class="title">MEDAL</span><br>
    <span class="subtitle">Loren Ipsum Dolar Sit Amet.</span>
  </div>
</div>