カード内の画像を水平方向に中央揃えする方法はありますか?
私は次のものを持っています
<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 の両方に追加しようとしましたが、何も変わりません。
ありがとう。
ベストアンサー1
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>