如何在Buefy输入框中将文本居中？

问题描述

我有一个Buefy模板，看起来像这样，但是我无法解决如何使输入框文本居中的问题，从而使一切看起来都很漂亮。

我尝试将“以文本为中心”添加到基本上所有内容上，但仍然没有将其居中！

<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="[e-mail]"
                        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>

我在这里想念什么？

解决方法

您可以在输入中添加自定义类：

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

然后为此编写CSS：

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

请注意，由于您正在为Buefy模块编写CSS，因此无法像通常在Vue单个文件组件中那样使用scoped CSS来实现。相反，您应该在更全局的级别上添加此CSS。