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

Question

我正在为我的元素使用 Bulma。

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

到目前为止，我尝试过这个:

.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 的 columns .如果您希望它们在较窄的视口(viewport)中相互堆叠，请删除 is-mobile 类(查看更多 here)。

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>