卡片标题中的居中文本

问题描述 投票:0回答:1
css bulma
1个回答
0
投票

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bulma Card Header Centered</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/>
  <style>
    .card-header {
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="columns mt-3">
    <div class="column is-3 ml-3">
      <div class="card has-background-warning-light">
        <div class="card-header">
          <p class="is-size-5 is-uppercase has-text-centered">
            regular price
          </p>
        </div>
        <div class="card-image">
          <div class="has-background-warning">
            <div class="has-text-centered">
              <span class="is-size-1 has-text-weight-bold">
                $ 999
              </span>
            </div>
          </div>
        </div>
        <div class="card-content">
          <div class="media">
            <div class="media-content">
              <p class="title is-3">
                standard price available for everyone
              </p>
              <p class="subtitle is-6 mt-1">
                regular price
              </p>
            </div>
          </div>
          <div class="content has-text-centered">
            <button class="button is-dark">
              BUY
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.