How to align Placeholder Text in HTML ?

Input Placeholder attribute specifies a short hint to describe the expected value of an input field / textarea. The short hint is displayed in the field before the user enters a value. In most of the browsers, placeholder texts are usually aligned on the left. The selector uses text-align property to set the text alignment in the placeholder.

This selector can change browser to browser. For example:

For Chrome, Mozilla, and Opera Browsers: use ::placeholder

For Internet Explorer: use :-ms-input-placeholder

Example 1: This example describes only placeholder alignment, it does not align placeholder value.

<!DOCTYPE html>

<html>

<head>

<title>Change Placeholder alignment | Codewithanbu</title>

<style>

body {text-align:center;padding: 20px;}

.body-section{width: 20%;margin: 0 auto;padding: 20px;background: #ddd;}

h1 {color:#5042e0; }

input[type="text"]::placeholder {text-align: left; }

input[type="text"]:-ms-input-placeholder {text-align: left; }

input[type="email"]::placeholder { text-align: center;}

input[type="email"]:-ms-input-placeholder {text-align: center;}

input[type="tel"]::placeholder {text-align: right;}

input[type="tel"]:-ms-input-placeholder {text-align: right; }

</style>

</head>

<body>

<h1>CodeWithAnbu</h1>

<h3>Placeholder Text Alignment</h3>

<p>Left Aligned : <input type="text" placeholder="Name"></p><br>

<p>Center Aligned : <input type="email" placeholder="Email"></p><br>

<p>Right Aligned : <input type="tel" placeholder="Phone Number"></p>

</div>

</body>

</html>

Output

Example 2: This example describes the placeholder and placeholder value align.

<!DOCTYPE html>

<html>

<head>

<title>Change Placeholder and text alignment | Codewithanbu</title>

<style>

body {text-align:center;padding: 20px;}

.body-section{width: 20%;margin: 0 auto;padding: 20px;background: #ddd;}

h1 {color:#5042e0; }

input[type="text"]{text-align: left; }

input[type="email"]{ text-align: center;}

input[type="tel"]{text-align: right;}