布尔玛的中心图像答案

【问题标题】：Center image in Bulma布尔玛的中心图像
【发布时间】：2018-06-24 22:32:00
【问题描述】：

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

我有以下

  <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 中，但没有任何变化。

谢谢。

【问题讨论】：

标签： bulma

【解决方案1】：

使用.is-flex修饰符将card-content的显示属性更改为flex。

现在您可以使用 flexbox 属性将figure 水平居中。 Bulma 没有对此进行修改的类，因此您可以自己制作...

.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>

【讨论】：

谢谢，这行得通。由于我需要在卡片上添加其他标签，我最终将is-flex is-horizontal-center 添加到figure 标签，否则其他标签也会与图像水平对齐。
我添加了更多的 flex，它对我有用：display: flex;
我否决了这个答案，因为虽然在技术上是正确的，但它打破了 Bulma 的工作方式并规避了内置修饰符。正确的答案只是简单地将 is-inline-block 添加到图像中。一切都会恰到好处。请参阅下面@Merbin 的答案。

【解决方案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元素放在彼此下方即可： p>

<!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>

【讨论】：

【解决方案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>

【讨论】：

与其他人相比，这对我来说绝对是最好的答案。有意义，不需要自定义样式。
我只需要“is-inline-block”类！谢谢！
谢谢，接受的解决方案对我不起作用，因为我没有在我的列中使用卡片，只有<figure> <image> 层次结构。这个解决方案对我有用，干杯！
这就是答案

【解决方案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之间

【讨论】：

【解决方案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>
...

【讨论】：