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

【问题标题】：Bulma - How to make text and image inline or next to each other?Bulma - 如何使文本和图像内联或彼此相邻？
【发布时间】：2018-04-13 07:57:36
【问题描述】：

我正在为我的项目使用 Bulma。

基本上，我正在尝试使用 Bulma 将文本和图像 (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>

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

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

【问题讨论】：

标签： html css bulma

【解决方案1】：

Bulma 是基于 Flexbox 的布局，因此请使用它提供的工具。我已更新您的 sn-p 以包括 Bulma 的 columns。如果您希望它们在较窄的视口中相互堆叠，请删除 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>

【讨论】：