在Bulma中居中图片

Question

在Bulma中居中图片

36

有没有一种方法可以将图像水平居中在卡片内？

我有以下内容

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

我无法将图片居中。我尝试在<figure>和父级 <div> 中添加 is-centered，但没有任何更改。

谢谢。

- Sig

5个回答

23

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

- sol

谢谢，这很有效。由于我需要向卡片添加其他标签，所以最终我将 is-flex is-horizontal-center 添加到了 figure 标签中，否则其他标签也会与图像水平对齐。 - Sig

我添加了更多的flex，它对我起作用：display: flex; - bravohex

4

我将这个答案下投票了，因为虽然在技术上是正确的，但它打破了Bulma的工作方式并规避了内置的修饰符。正确的答案只需要简单地将"is-inline-block"添加到图片中即可。一切都会流畅地进行。请参见下面@Merbin的答案。 - RobMac

13

你还可以使用在Bulma的布局部分找到的.level元素。级别元素是Bulma用于帮助特定垂直和水平居中元素（如图像和文本以外的其他内容）的工具。你可以在这里找到更多信息。

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

- buildpax

11

本地 Bulma 解决方案:

<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 和 is-centered的div标签中。

- fatihyildizhan

-2

您可以使用 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>
...

- Sidonai

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Merbin J Anselm · Accepted Answer

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