javascript - v-text-field text-center not working Vuetify - Stack Overflow

admin管理员组

文章数量:1391955

I am using v-text-field and it is not able to set text-align to center.

I tried these solutions but not working.

1.

<v-text-field type="number" class="mr-2 text-center"></v-text-field>

<v-text-field type="number" class="mr-2 centered-input"></v-text-field>

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

I am using v-text-field and it is not able to set text-align to center.

I tried these solutions but not working.

1.

<v-text-field type="number" class="mr-2 text-center"></v-text-field>

<v-text-field type="number" class="mr-2 centered-input"></v-text-field>

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

• javascript
• vue.js
• vuejs2
• vuetify.js

Share Improve this question Follow edited Oct 22, 2020 at 9:21 Prime asked Oct 22, 2020 at 9:05 PrimePrime 2,84922 gold badges1010 silver badges2424 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It will not work if you give style in the current Vue file. You should add the style as global.

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

Or it seems like that you've added scoped to <style> tag. You can remove it to make the style as global.

From

<style lang="scss" scoped>

To

<style lang="scss">

Try this approach:

<v-text-field type="number" class="my-field" />

.my-field {
    width: 200px;
}

.my-field input {
    padding: 10px;
    background: #ccc;
    text-align: center;
}

本文标签： javascriptvtextfield textcenter not working VuetifyStack Overflow