How to center Google sign in Button in a Svelte App

user_11286916 0
Viewed 706

I'm trying to center the Google sign in button in my svelte app, but this doesn't work. Same thing also happen using a Svelte Atoms component FileUpload. If I use a standard button, this will be centered in the app. Does anyone has an idea how I can solve that problem? My code is based on the svelte template, here the specific part:

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

Here is how it looks like and I want that both components will be centered

Thanks Paulo

google-signin svelte css html javascript
1 Answers

This is a question of CSS, there are several ways to center your component.

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