CODEWITHSUNDEEP
htmlcss
max_
max_

Reputation: 24481

Center HTML Input Text Field Placeholder

How can I centre the input field's placeholder's alignment in a html form?

I am using the following code, but it doesn't work:

CSS ->

input.placeholder {
    text-align: center;
}
.emailField {
    top:413px;
    right:290px;
    width: 355px;
    height: 30px;
    position: absolute;
    border: none;
    font-size: 17;
    text-align: center;
}

HTML ->

<form action="" method="POST">
    <input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>

Upvotes: 192

Views: 385927

Answers (10)

Abhishek
Abhishek

Reputation: 1120

For vertically centering the placeholder:

input::placeholder{
position:relative !important;
top:50% !important;
transform:translateY(-50%) !important; 
}

Upvotes: 3

Ankit Jaiswal
Ankit Jaiswal

Reputation: 274

you can use also this way to write css for placeholder

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

/* or, for legacy browsers */

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

Upvotes: 10

prarthana.m
prarthana.m

Reputation: 3346

If you want to change only the placeholder style, select the ::placeholder pseudo-element

::placeholder {
   text-align: center; 
}

/* or, for legacy browsers */

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

Upvotes: 333

Mohammad Daliri
Mohammad Daliri

Reputation: 1386

You can use set in a class like below and set to input text class
CSS:

 .place-holder-center::placeholder {
        text-align: center;
    }

HTML:

<input type="text" class="place-holder-center">

Upvotes: 8

Brandon May
Brandon May

Reputation: 23

By using the code snippet below, you are selecting the placeholder inside your input, and any code placed inside will affect only the placeholder. 

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

Upvotes: 0

Rani Utami
Rani Utami

Reputation: 41

You can try like this :

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

Upvotes: 3

Rudresh Bhatt
Rudresh Bhatt

Reputation: 2025

::-webkit-input-placeholder {
 font-size: 14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
:-moz-placeholder { 
 font-size:14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
::-moz-placeholder { 
 font-size: 14px;
 color: #d0cdfa; 
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
} 
:-ms-input-placeholder { 
 font-size: 14px; 
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}

Upvotes: 1

Ian David Bocioaca
Ian David Bocioaca

Reputation: 107

You can make like this:

    <center>
    <form action="" method="POST">
    <input type="text" class="emailField" placeholder="[email protected]" style="text-align: center" name="email" />
    <input type="submit" value="submit" />  
</form>
    </center>

Working CodePen here

Upvotes: 7

Jamie Dixon
Jamie Dixon

Reputation: 53991

input{
   text-align:center;
}

is all you need.

Working example in FF6. This method doesn't seem to be cross-browser compatible.

Your previous CSS was attempting to center the text of an input element which had a class of "placeholder".

Upvotes: 118

Erick Petrucelli
Erick Petrucelli

Reputation: 14872

The HTML5 placeholder element can be styled for those browsers that accept the element, but in diferent ways, as you can see here: http://davidwalsh.name/html5-placeholder-css.

But I don't believe that text-align will be interpreted by the browsers. At least on Chrome, this attribute is ignored. But you can always change other things, like color, font-size, font-family etc. I suggest you rethinking your design whether possible to remove this center behavior.

EDIT

If you really want this text centered, you can always use some jQuery code or plugin to simulate the placeholder behavior. Here is a sample of it: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.

This way the style will work:

input.placeholder {
    text-align: center;
}

Upvotes: 7

Related Questions