web-dev-qa-db-ja.com

ブルマの中央の画像

カード内の画像を水平方向に中央揃えする方法はありますか？

私は次のものを持っています

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

card-content修飾子を使用して、.is-flexの表示プロパティを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>
16
sol

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>
13
Merbin J Anselm

Bulmalayoutセクションにある.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>
11
buildpax