CODEWITHSUNDEEP
htmlcss
user1662306
user1662306

Reputation: 502

Centering a Placeholder and Input Text in a Text Field

I was wondering if it was possible to center a placeholder and the input which the user will enter in the Text Field. I imagine it would be possible yet I cant figure it out. could anyone help? my code for the Text Field in question is below...

<input type="text" style="font-weight:bold:" name="kword" id="kword" autofocus ="on" placeholder="Enter Keyword(s)" autocomplete ="on"/>

Thanks

Upvotes: 8

Views: 17689

Answers (3)

Damian Kacprzak
Damian Kacprzak

Reputation: 1

In my case, a good solution was :

div.search {display: flex;}

input::placeholder {align-self: center;}

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

This can be used to text-align:center

CSS:

input, input[placeholder] {
    text-align: center;
}

Upvotes: 5

Rudresh Bhatt
Rudresh Bhatt

Reputation: 2025

Target the browser-specific placeholder pseudo-element like this:

input {
  text-align: center;
}

::-webkit-input-placeholder {
  text-align: center;
}
:-moz-placeholder {
  /* Firefox 18- */
  text-align: center;
}
::-moz-placeholder {
  /* Firefox 19+ */
  text-align: center;
}
:-ms-input-placeholder {
  text-align: center;
}
<input type="text" style="font-weight:bold;" placeholder="Enter Keyword(s)" />

Upvotes: 2

Related Questions