How to Align the Placeholder Text of an Input Field in HTML

The ::placeholder pseudo-element allows styling the placeholder text of a form element. It can change from browser to browser.

The placeholder attribute is used to describe the expected value of an input field. Before entering a value, there is a short hint displayed in the field.

Placeholder texts are commonly aligned to the left in most browsers.

We use the text-align property to set the alignment of text in the placeholder.

In our snippet, we’ll demonstrate step by step how to center a placeholder text.

Create HTML

  • Use a <form> element with action and method attributes.
  • Use an <input> element with the type, class, "placeholder", name attributes.
<form action="/form/submit" method="POST">
  <input type="email" class="emailField" placeholder="info@w3docs.com" name="email" />
</form>

Add CSS

  • Set the text-align property to "center" for the input.
  • Use ::-webkit-input-placeholder for Chrome, Opera, and Safari.
  • Use :-moz-placeholder for Firefox 18-.
input {
  text-align: center;
}

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

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

Now, we can bring together the parts of our code.

Example of centering an input field’s placeholder text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        text-align: center;
      }
      ::-webkit-input-placeholder {
        text-align: center;
      }
      :-moz-placeholder {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="POST">
      <input type="email" class="emailField" placeholder="[email protected]" name="email" />
    </form>
  </body>
</html>

Result

Let’s see another example, where we use three <input> elements and use the text-align property set to "center", "right", and "left" respectively. In this example, we align both the input field’s placeholder and the placeholder value.

Example of aligning an input field’s placeholder and placeholder value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type="email"] {
        text-align: center;
      }
      input[type="text"] {
        text-align: right;
      }
      input[type="tel"] {
        text-align: left;
      }
      body {
        text-align: center;
      }
      label {
        display: block;
        margin-bottom: 30px;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      <label>Center Alignment
        <br>
        <input type="email" placeholder="Email">
      </label>
      <label>Right Alignment
        <br>
        <input type="text" placeholder="Name">
      </label>      
      <label>Left Alignment
        <br>
        <input type="tel" placeholder="Phone Number">
      </label>
    </form>
  </body>
</html>

Now, we'll demonstrate one more example, where our placeholder values are aligned to the center, right, and left, whereas the input starts from the left in all cases.

Example of aligning the placeholder text of an input field:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type="email"]::placeholder {
        text-align: center;
      }
      input[type="text"]::placeholder {
        text-align: right;
      }
      input[type="tel"]::placeholder {
        text-align: left;
      }
      body {
        text-align: center;
      }
      label {
        display: block;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Placeholder Text Alignment</h1>
    <form action="/form/submit" method="post">
      <label>Center Alignment
        <br>
        <input type="email" placeholder="Email">
      </label>
      <label>Right Alignment
        <br>
        <input type="text" placeholder="Name">
      </label>
      <label>Left Alignment
        <br>
        <input type="tel" placeholder="Phone Number">
      </label>
    </form>
  </body>
</html>