如何在HTML中对齐占位符文本（）

占位符属性指定一个简短提示, 用于描述输入字段/文本区域的期望值。在用户输入值之前, 该字段中会显示简短提示。在大多数浏览器中, 占位符文本通常在左侧对齐。选择器使用text-align属性在占位符中设置文本对齐方式。
该选择器可以将浏览器更改为浏览器。例如：

对于Chrome, Mozilla和Opera浏览器：
::placeholder
对于Internet Explorer：
:-ms-input-placeholder

范例1：本示例仅说明占位符对齐, 不说明占位符值。

< !DOCTYPE html> < html> < head> < title> Change Placeholder alignment< /title> < style> input[type="email"]::placeholder { /* Firefox, Chrome, Opera */ text-align: center; } input[type="text"]::placeholder { /* Firefox, Chrome, Opera */ text-align: right; } input[type="tel"]::placeholder { /* Firefox, Chrome, Opera */ text-align: left; } input[type="email"]:-ms-input-placeholder {/* Internet Explorer 10-11 */ text-align: center; } input[type="email"]::-ms-input-placeholder { /* Microsoft Edge */ text-align: center; } body { text-align:center; } h1 { color:green; } < /style> < /head> < body> < h1> srcmini< /h1> < h3> Placeholder Text Alignment< /h3> < p> Center Aligned< br> < input type = "email" placeholder = "Email"> < /p> < br> < p> Right Aligned< br> < input type = "text" placeholder = "Name"> < /p> < br> < p> Left Aligned< br> < input type = "tel" placeholder = "Phone Number"> < /p> < /body> < /html>

【如何在HTML中对齐占位符文本（）】输出如下：

文章图片
范例2：本示例描述了占位符和占位符值的对齐方式。

< !DOCTYPE html> < html> < head> < title> Change Placeholder alignment< /title> < style> input[type="email"]{ text-align: center; } input[type="text"] { text-align: right; } input[type="tel"] { text-align: left; } body { text-align:center; } h1 { color:green; } < /style> < /head> < body> < h1> srcmini< /h1> < h3> Placeholder Text Alignment< /h3> < p> Center Aligned< br> < input type = "email" placeholder = "Email"> < /p> < br> < p> Right Aligned< br> < input type = "text" placeholder = "Name"> < /p> < br> < p> Left Aligned< br> < input type = "tel" placeholder = "Phone Number"> < /p> < /body> < /html>

输出如下：