Bulma

Question

我正在为我的项目使用 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>

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

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

Answer 1

Bulma 是一种基于 Flexbox 的布局，因此请使用它为您提供的工具。我更新了您的代码段以包含 Bulma 的 columns. If you want them to stack on top of each other in a narrower viewport, remove the is-mobile class (see more 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>

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

Bulma - How to make text and image inline or next to each other?

html

css