div Framework 7 中的中心内容

Question

在我的网格布局中，使用 Framework 7，我需要将一个 link 居中，这是一个位于一行中的按钮。我试图设置 justified-content: center; 创建一个新的 class colled center 但我看到这个 CSS 属性被覆盖了： justified-content: space-between; 来自默认的 Framework 7 CSS 文件。这是我的页面内容：

<div data-page="scanQR" class="page">
    <!-- Scrollable page content-->
    <div class="page-content">
      <div class="content-block">
        <div class="content-block-inner">
          <div class="row center">
            <div class="col-auto">
              <img src="img/pagopa.png" />
            </div>
          </div>
          <div class="row center">
              <div class="col-100.tablet-33">
                <p><a href="#" class="button mybtn" id="scan">Scan QR Code</a></p>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>

如何让 link 在我的视野中居中？

Answer 1

您在 <div class=".col-100.tablet-33"> 类中有错字。

改为：<div class="col-100 tablet-33">

下面的片段：

<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.5.2/css/framework7.material.min.css" rel="stylesheet" />
<div data-page="scanQR" class="page">
  <!-- Scrollable page content-->
  <div class="page-content">
    <div class="content-block">
      <div class="content-block-inner">
        <div class="row center">
          <div class="col-auto">
            <img src="img/pagopa.png" />
          </div>
        </div>
        <div class="row center">
          <div class="col-100 tablet-33">
            <p><a href="#" class="button mybtn" id="scan">Scan QR Code</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

div Framework 7 中的中心内容

Center content in div Framework 7

html

css

html-framework-7