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. Here you will find out how to align an input field’s placeholder text.

Tags

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

The <span class="attribute">placeholder</span> attribute is used to describe the expected value of an input field. Before entering a value, a short hint is displayed in the field.

Placeholder text is commonly aligned to the left in most browsers.

To align the placeholder text, we use the ::placeholder pseudo-element with the text-align property. Note that applying text-align directly to the <input> element only aligns the entered value, not the placeholder.

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

Create HTML

Use a <form> element with <span class="attribute">action</span> and <span class="attribute">method</span> attributes.
Use an <input> element with the <span class="attribute">type</span>, <span class="attribute">class</span>, <span class="attribute">"placeholder"</span>, <span class="attribute">name</span> attributes.

How to Align Placeholder Text of Input Field in HTML

<form action="/form/submit" method="POST">
  <input type="email" class="emailField" placeholder="[email protected]" name="email" />
</form>

Add CSS

Use the <kbd class="highlighted">::placeholder</kbd> pseudo-element to target the placeholder text.
Apply the <kbd class="highlighted">text-align</kbd> property to set the alignment.
Apply text-align to the input element itself if you also want to align the entered value.

How to Align Placeholder Text of Input Field in HTML

input {
  text-align: center;
}

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

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

Example of centering an input field’s placeholder text:

How to Align Placeholder Text of Input Field in HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        text-align: center;
      }
      input::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>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> <form action-xhr="/form/submit" method="POST"> <input class="emailField" name="email" placeholder="[email protected]" type="email">``</input> </form> </div>Let’s see another example, where we use three <input> elements and use the <kbd class="highlighted">text-align</kbd> 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:

How to Align Placeholder Text of Input Field in HTML

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

Try it Yourself »

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:

How to Align Placeholder Text of Input Field in HTML

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

Try it Yourself »