192

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>
2
  • Not really an answer, but jQuery Mobile does this so you might want to look how they achieve it.
    – Evanss
    May 1, 2012 at 9:49
  • For me, your code works when you get rid of the input.placeholder bit. Aligning the text inside the input to center aligns the placeholder as well.
    – Cannicide
    Jul 21, 2017 at 19:59

10 Answers 10

329

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; 
}
1
  • 5
    This works fine for most input fields, but not for type date. Do you know how to also make it work for date? Sep 21, 2016 at 8:27
118
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".

5
  • 7
    I wan't to centre the placeholder as well as the text entered into the field
    – max_
    Sep 11, 2011 at 21:48
  • 1
    Yes. This is what this example does. The placeholder is text in the field. Sep 11, 2011 at 21:49
  • 2
    it doesn't work in the example. In the example, the placeholder is left aligned.
    – max_
    Sep 11, 2011 at 21:49
  • Beware, if you're using libraries such as Bootstrap or Semantic UI, you must add the style inline, i.e. <input type="text" placeholder="Search..." style="text-align: right;"> for it to work. Or add important! to your CSS rule if you're using external files.
    – Behdad
    Oct 26, 2015 at 11:41
  • It looks like the problem you are having max_ is just an issue of browser compatibility. This works fine in most major browsers except Safari.
    – Cannicide
    Jul 21, 2017 at 20:01
10

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

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

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

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

1
  • Only this is working for me. Maybe styles added in HTML is given more priority or overriding all other styles.
    – Gokul
    Sep 26, 2017 at 10:00
3

You can try like this :

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

For vertically centering the placeholder:

input::placeholder{
position:relative !important;
top:50% !important;
transform:translateY(-50%) !important; 
}
1
::-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;
}
0

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
}
2
  • This answer does not seem to offer anything different compared to the Accepted Answer. Jul 3, 2019 at 0:37
  • This answer does give a hint of how to change the placeholder of only one specific element as opposed to all placeholders. E.g. .foo::-webkit-input-placeholder { … }.
    – Henrik N
    Dec 12, 2019 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.