Центрировать текст в заголовке карточки в Bulma

Обычно использование bulma упрощает позиционирование текста. Мне не удалось разместить атрибут card-header по центру.

Моя попытка:

<link href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel = "stylesheet"/>
<div class = "columns mt-3">
        <div class = "column is-3 ml-3" style = "display: flex;">
            <div class = "card has-background-warning-light">
                <div class = "card-header">
                    <p class = "has-text-right 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>
                    <!-- <figure class = "image is-3by1">
                        <img src = "https://bulma.io/assets/images/placeholders/1280x960.png" alt = "Placeholder"/>
                    </figure> -->
                </div>
                <div class = "card-content">
                    <div class = "media">
                        <!-- <div class = "media-left">
                            <figure class = "image is-64x64">
                                {{ teacher.country.show_flag }}
                            </figure>
                        </div> -->
                        <div class = "media-content">
                            <p class = "title is-3" style = "display: flex;">
                                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>

Почему мой has-text-centered применяется не в card-header, а везде?

github.com/jgthms/bulma/issues/1101

— 24.05.2024 16:18

css bulma

24.05.2024 15:17

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

ИМХО, чтобы улучшить свой ответ, вы должны были упомянуть, что вы применили justify-content: center к классу .card-header и что он делает, т. е. «центрирует контент в контейнере». Но этот CSS не нужен.

— 25.05.2024 03:44

25.05.2024 03:16

Ответ принят как подходящий

Комментарий MrUpsidown был полезен. В Bulma вы можете центрировать элементы, используя встроенный служебный класс. Центрируйте текст или элементы внутри контейнера с помощью класса .is-centered.

Для заголовка вашей карты:

<!DOCTYPE html>
<html lang = "en">
<head>
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" rel = "stylesheet">
</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 = "card-header-title is-centered">Centered Header</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

25.05.2024 03:42

Другие вопросы по теме

Отключить темный режим в Bulma 1.0

Блокируйте контент в верхней части тела героя с помощью Bulma

Попытка устранить пробелы между элементами списка в CSS/Bulma

React и Bulma: как сделать вертикальную прокрутку столбца с помощью css?

Как я могу сделать кнопку кнопкой загрузки, пока функция выполняется?

Код Vue.js работает только в окне инкогнито

Панель поиска, чтобы найти строки в нескольких аккордеонах

Bulma flex оправдать содержимое не работает в reactjs

Bulma: Показать карту в ячейке таблицы при наведении?

Как использовать flexbox bulma, чтобы нижний колонтитул прилипал к нижней части страницы?

Центрировать текст в заголовке карточки в Bulma

Ответы 2

Другие вопросы по теме

Похожие вопросы