CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
Prime
Prime

Reputation: 2849

v-text-field text-center not working Vuetify

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

View

Inspect Element

Upvotes: 1

Views: 7281

Answers (2)

michael
michael

Reputation: 4173

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

Upvotes: 4

CodingLikeDavid
CodingLikeDavid

Reputation: 21

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

Upvotes: 1

Related Questions