Bulma 中的中心图像

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

使用 .is-flex 修饰符将 card-content 的显示属性更改为 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>

Answer 2

您还可以使用 Bulma layout 部分中的 .level 元素。水平元素是 Bulma 用来帮助元素（例如图像和文本以外的内容）的特定垂直和水平居中的元素。您可以找到有关它的更多信息 here。

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
</head>

<body>
  <div class='column is-one-quarter has-text-centered'>
    <div class='card equal-height'>
      <div class='card-content'>
<!-- Place image inside .level within your card element -->
        <nav class="level">
          <div class="level-item has-text-centered">
            <figure class='image is-64x64'><img src='https://bulma.io/images/placeholders/128x128.png'></figure>
          </div>
        </nav> 
<!-- And it'll be centered like so -->
      </div>
    </div>
  </div>
</body>

</html>

注意：为了使多个元素（例如图像和文本）水平居中和垂直居中，您只需将 .level彼此下方的元素：

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
</head>

<body>
  <div class='column is-one-quarter has-text-centered'>
    <div class='card equal-height'>
      <div class='card-content'>
        <!-- Place image inside .level within your card element -->
        <nav class="level">
          <div class="level-item has-text-centered">
            <figure class='image is-64x64'><img src='https://bulma.io/images/placeholders/128x128.png'></figure>
          </div>
        </nav>
        <nav class="level">
          <div class="level-item has-text-centered">
            <h1>Title to image</h1>
          </div>
        </nav>
        <!-- And it'll be centered like so -->
      </div>
    </div>
  </div>
</body>

</html>

Answer 3

将 figure 标记设为 inline-block 并将 has-text-centered 分配给父标记。优点是不需要自定义代码。

<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-image has-text-centered">
        <figure class="image is-64x64 is-inline-block">
            <img class="is-rounded" src="https://unsplash.it/64"/>
        </figure>
    </div>
    <div class='card-content'>
      <!-- other content here -->
    </div>
  </div>
</div>

Answer 4

原生布尔玛解决方案：

<div class="columns is-flex is-centered">
    <figure class="image is-128x128">
        <img src="assets/images/logo.png" alt="logo">
    </figure>
</div>

将您的代码放在 columns, is-flex and is-centered div

之间

Answer 5

您可以使用 Flexbox 助手：is-flex 和 is-justify-content-center

...
<figure class="image is-128x128 is-flex is-justify-content-center">
    <img src="assets/images/logo.png" alt="logo">
</figure>
...

Bulma 中的中心图像

Center image in Bulma

bulma