在Bulma框架中如何将卡片内的图片水平居中？

没问题，我来帮你搞定这个Bulma里的图片居中问题！你之前遇到的核心问题是：has-text-centered类只对行内元素、文本类内容生效，而<figure>是块级元素，所以这个类没法让它实现水平居中。下面给你两种简单有效的解决方案：

方法一：利用Bulma的Flexbox工具类 #

Bulma自带完善的flex布局工具类，我们可以给card-content添加flex相关类，让它内部的元素自动水平居中：

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

这里的is-flex让card-content变成flex容器，is-justify-content-center设置了主轴（水平方向）的对齐方式为居中，里面的figure就会自动居中了。

方法二：使用Bulma的Margin辅助类 #

Bulma提供了mx-auto类，它可以让块级元素的左右margin自动分配，从而实现水平居中。直接给figure添加这个类即可：

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

两种方法都能解决你的问题，你可以根据自己的布局需求选择其中一种~

内容的提问来源于stack exchange，提问作者Sig