文章/答案/技术大牛

发布

社区首页 >问答首页 >布尔马的中心形象

问布尔马的中心形象
EN

Stack Overflow用户

提问于 2018-01-16 09:02:55

回答 5查看 38K关注 0票数 35

是否有一种方法可以在卡内水平居中图像？

我有以下几点

  <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

回答 5

Stack Overflow用户

回答已采纳

发布于 2018-01-16 09:27:12

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

票数 23

Stack Overflow用户

发布于 2019-01-13 07:31:42

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

票数 62

Stack Overflow用户

发布于 2018-06-23 03:44:03

您还可以使用在Bulma布局部分找到的.level元素。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>

票数 13

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48277473

复制

相似问题

问布尔马的中心形象
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问布尔马的中心形象EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问布尔马的中心形象
EN