Center HTML Input Text Field Placeholder

html

responsive-design

css

web-development

byNikita Barsukov·Sep 16, 2024

Center an HTML input's placeholder text by applying text-align: center; to the ::placeholder pseudo-element:

input[type="text"]::placeholder {
  text-align: center;  /* Bam! Your placeholder is now centered */
}

Attaching the attribute selector type="text" ensures that only inputs of text type have centered placeholders. Like a VIP tag for input fields:

<input type="text" placeholder="Enter text here. Not elsewhere.">

Setting the stage: Input field styling

Providing input field dimensions

Creating a consistent placeholder centering requires defined input field dimensions and styling. Imagine it as a canvas for your placeholder. Here's a basic setup:

input[type="text"] {
  /* Hey there, good looking! 😉 */
  width: 300px;      /* Providing 'elbow room' for the placeholder to strut! */
  height: 40px;      /* Setting the stage for the main actor - placeholder */
  border: 1px solid; /* Framing our canvas */
}

Coding for different browsers

Like sugar and spice make everything nice, vendor-specific pseudo-elements make the placeholder centering just right across different browsers:

input[type="text"]::-webkit-input-placeholder { /* For the Chrome/Opera/Safari squad */
  text-align: center;  /* Time to align...and shine! 🔆 */
}

input[type="text"]::-moz-placeholder { /* For the Firefox fans */
  text-align: center;   /* Centrally Align! No, it's not a new dance move... */
  opacity: 1; /* Firefox's shot of 'pick me up' for a Monday morning */
}

input[type="text"]:-ms-input-placeholder { /* Hello Internet Explorer...yes, you still exist */
  text-align: center;   /* Finally, centering enters Internet Explorer's realm */
}

Constantly refer to MDN web docs for the most current browser compatibility for the ::placeholder pseudo-element.

Centering placeholders in everyday coding

Quick centering using inline styles

Entered a placeholder centering emergency? Utilize inline styles for immediate relief!

<input type="text" placeholder="Enter Text" style="text-align: center;">  /* Inline styling to the rescue! 🚑 */

Selective centering with CSS classes

When not all placeholders are created equal, selective centering is needed. Enter the CSS class:

.place-holder-center::placeholder {
  text-align: center;   /* Center-ception: Center within a center */
}

Attach this class to input fields accordingly:

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

Centering the whole form—HTML style

As a perfectionist you may also want to center the entire form. Although we miss the <center> tag, modern CSS is here to save the day:

form {
  display: flex;   /* Time to flex 💪some CSS muscles */
  justify-content: center; /* Centering the form */
  align-items: center;     /* Vertically aligning the form's inner contents */
}

Crossing the T's and dotting the I's

Form rendering and functionality

Ensuring that all HTML tags close properly, and providing a submit button for form functionality is vital.

<form method="POST" action="submit_url_here">
  <input type="text" placeholder="Enter Text">
  <button type="submit">Submit</button>  /* Click me! I dare you...I double dare you! */
</form>