如何在 Svelte 应用程序中居中 Google 登录按钮

Question

我试图将 Google 登录按钮置于我的 svelte 应用程序的中央，但这不起作用。使用 Svelte Atoms 组件 FileUpload 也会发生同样的事情。如果我使用标准按钮，这将在应用程序中居中。有谁知道我该如何解决这个问题？我的代码是基于svelte模板的，具体部分在这里：

<main>
    <div class="g-signin2" data-longtitle="true" data-onsuccess="onSignIn"></div>
    <button>Gte an random number</button>
    <FileUpload title="Upload file" subtitle={fileName} on:change={onChange} />
    <h1>Hello {name}!</h1>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }
</style>

谢谢 保罗

Answer 1

这是 CSS 的问题，有几种方法可以使您的组件居中。

main {
  ...
  display: flex; /* or grid */
  justify-content: center;
  align-items: center;
}