Placeholder ion-input

Ionic Framework ionic-v3
1

Hi !

Is it possible to center a placeholder within an ion-input please ?

2

Yes, it is a native input inside of ion-input. To center the placeholder and the input value:

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

If you only want the placeholder centered:

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

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

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

.text-input:-ms-input-placeholder {
  text-align: center;
}
2 Likes
3

Thank you very much that’s work ! Just a question, how I could know for .text-input ? Because I try ion-input{text-align :center;}.

4

That is a class that we add to the native input element. It isn’t documented but if you inspect the ion-input element in a browser you can see the class added to it that way. :slight_smile:

1 Like
5

Yes I discovered that today ! Thank you very much !

1 Like
6

Hi Brandy, I´d like to center the placeholder, but in a field that contains an icon:

<ion-item class="rounding" lines="none">
          <ion-input color="light" placeholder="E-mail"></ion-input>
          <ion-icon color="light" name="contact" slot="start"></ion-icon>
</ion-item>

Can you help me with that, please?