在HTML中，要使文本框内的文字居中显示，可通过CSS设置
text-align: center;属性，对于input或textarea元素，直接应用该样式即可实现文字水平居中，若需垂直居中，可结合行高(line-height)或flex布局调整。在HTML中，让文本框内的文字居中显示主要通过CSS的text-align属性实现,以下是详细方法及代码示例：
单行文本框（input）
<input type="text" style="text-align: center;" placeholder="文字居中">
原理：text-align: center; 使输入框内的文本水平居中。
多行文本框（textarea）
<textarea style="text-align: center;">默认文字居中</textarea>
注意：多行文本框中,每行文字都会独立居中。
完整示例（推荐写法）
<!DOCTYPE html>
<html>
<head>
<style>
/* 通过CSS类统一控制 */
.center-text {
text-align: center; /* 文字居中 */
display: block; /* 使margin生效 */
margin: 20px auto; /* 文本框整体水平居中 */
width: 300px; /* 建议固定宽度 */
padding: 10px;
font-family: Arial; /* 增强可读性 */
}
</style>
</head>
<body>
<!-- 单行文本框 -->
<input class="center-text" type="text" placeholder="请输入内容">
<!-- 多行文本框 -->
<textarea class="center-text" rows="4">多行文本示例</textarea>
</body>
</html>
关键细节说明
-
为什么用
display: block？<input>默认是行内元素，需转为块级元素才能用margin: auto实现整体居中。 -
移动端适配
添加视口标签确保缩放正常：<meta name="viewport" content="width=device-width, initial-scale=1">
-
禁用状态居中
通过:disabled选择器单独设置：
.center-text:disabled { background-color: #f0f0f0; }
常见问题解决
-
文字不居中？
检查是否被其他CSS覆盖,尝试增加优先级：input.center-text { text-align: center !important; } -
文本框不居中？
确认父元素有足够宽度，并检查margin: auto是否生效。 -
兼容性
text-align属性兼容所有浏览器（包括IE6+）。
最佳实践建议
-
优先使用CSS类
避免内联样式,便于维护和扩展。 -
设置固定宽度
未指定宽度时,浏览器可能按默认值渲染导致错位。
-
考虑垂直居中
单行文本可通过line-height调整：input.center-text { height: 40px; line-height: 40px; /* 等于高度值 */ }
引用说明：本文方法参考MDN Web文档的CSS text-align规范及W3C标准，所有代码均通过Chrome、Firefox、Edge及移动端浏览器测试验证。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/31296.html
