bulma - bool 玛的中心图像

Question

有没有办法将卡片内的图像水平居中？

我有以下

  <div class='column is-one-quarter has-text-centered'>
    <div class='card equal-height'>
      <div class='card-content'>
        <figure class='image is-64x64'><img src='...'></figure>
      </div>
    </div>
  </div>

我无法将图像居中。我试图添加 is-centered无论是图形还是父 div，但没有任何变化。

谢谢。

Answer 1

更改 card-content 的显示属性至 flex通过使用 .is-flex修饰符。

现在你可以使用 flexbox 属性来水平居中 figure . Bulma 没有为此修改类(class)，因此您可以制作自己的...

.is-horizontal-center {
  justify-content: center;
}

将此添加到 card-content你就完成了。

.is-horizontal-center {
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet"/>
<div class='column is-one-quarter'>
  <div class='card equal-height'>
    <div class='card-content is-flex is-horizontal-center'>
      <figure class='image is-64x64'><img src='https://unsplash.it/64'></figure>
    </div>
  </div>
</div>