如何使用 bulma 水平居中 bulma-calendar

Question

我正在使用 bulma-calendar 并希望日历水平居中。我想我几乎尝试了 .has-text-centered, .is-centered, 旁边的空列的所有组合......不知何故我无法完成这项工作。我会很感激一个提示。谢谢

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- import bulma -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <!-- import bulma-calendar -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.9/dist/css/bulma-calendar.min.css">
</head>

<body>
    <!-- import bulma-calendar -->
    <script src="https://cdn.jsdelivr.net/npm/bulma-calendar@6.0.9/dist/js/bulma-calendar.min.js"></script>   

    <div class="columns has-text-centered">
        <div class="column">
            asd
            <input type="date">
        </div>
    </div>

    <script>
        var options = {
            type: "date",
            color: "danger",
            dateFormat: "DD-MM-YYYY",
            startDate: this.startDate,
            displayMode: "inline",
        };

        // Initialize all input of type date
        var calendars = bulmaCalendar.attach('[type="date"]', options);

        // Loop on each calendar initialized
        for (var i = 0; i < calendars.length; i++) {
            // Add listener to date:selected event
            calendars[i].on('select', date => {
                console.log(date);
            });
        }

        // To access to bulmaCalendar instance of an element
        var element = document.querySelector('#my-element');
        if (element) {
            // bulmaCalendar instance is available as element.bulmaCalendar
            element.bulmaCalendar.on('select', function (datepicker) {
                console.log(datepicker.data.value());
            });
        }
    </script>
</body>

Answer 1

让它与包装器一起工作

<div class="is-inline-block">
  <input type="date">
</div>

如何使用 bulma 水平居中 bulma-calendar

How to center bulma-calendar horizontally with bulma

bulma