CODEWITHSUNDEEP
vue.jsbuefy
Johnny John Boy
Johnny John Boy

Reputation: 3222

How to centre text in a Buefy input box?

I have a Buefy template which looks a little like this but I cannot work out how to centre the input box text so everything looks pretty.

enter image description here

I've tried adding 'has-text-centered' to basically everything and it still doesn't centre it!

<template>

  <section class="hero is-info is-fullheight">

    <div class="hero-body">
      <div class="container">

        <div class="columns is-centered">
          <div class="column is-5-tablet is-4-desktop is-3-widescreen">

            <div class="box">

              <div class="login">

                <b-field label="">
                    <b-input type="email"
                        placeholder="[email protected]"
                        v-model="email">
                    </b-input>
                </b-field>

                <b-field label=""
                  :message="error_message">
                    <b-input type="password"
                        placeholder="****************"
                        v-model="password">
                    </b-input>
                </b-field>

                <div class="buttons">
                    <b-button @click="login" :loading="loading" type="is-info" expanded>Log In</b-button>
                </div>

                <p>Create an account <router-link to="/sign-up">here</router-link>!</p>
              </div>

            </div>

          </div>
        </div>

      </div>
    </div>

  </section>


</template>

What am I missing here?

Upvotes: 0

Views: 1908

Answers (1)

hatef
hatef

Reputation: 6199

You could add a custom class to your input:

<b-input type="email"
         placeholder="[email protected]"
         v-model="email"
         class="input-text-center"
>
</b-input>

And then write a CSS for that:

.input-text-center input {
    text-align: center;
}

Please note since you are writing a CSS for a Buefy module you can't do it with scoped CSS as you would normally do in a Vue single file component. Instead you should add this CSS at a more global level.

Upvotes: 1

Related Questions