Center form input and placeholder?

Question

I am using AngularJS and Ionic.

I have an email input field:

<input type="password" placeholder="Password" ng-model="data.password">

where I would like to center the text. I have attempted both:

<input type="password" placeholder="Password" ng-model="data.password" class="align-center">
<input type="password" placeholder="Password" ng-model="data.password" class="center">

but neither attempt made a difference.

• Why didn't any of the attempts succeed?
• How can I center the text?
• Is this a situation where adding a styling framework like Bootstrap would be beneficial?

Answer 1

Literally all you need is to add a text-align:center to your input field through a CSS class or an inline style. We can't see what kind of CSS the classes you tried to use include, so we can't really know why they didn't work out for you. :(

Fiddle:

http://jsfiddle.net/HB7LU/20067/

Answer 2

you can use this bootstrap class to center the text

class="text-center"

---

like this:

<input type="password" placeholder="Password" ng-model="data.password" class="text-center">