css 输入框中文字居中 |css 平分布局

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

上述代码中，大家使用了CSS的text-align属性来实现文本居中。通过input[type=”text”]选择器，大家可以将此属性仅应用于文本输入框。

如果你想让文本框中的提示信息也居中，可以使用placeholder伪类。

::-webkit-input-placeholder { /* WebKit browsers */
text-align: center;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
text-align: center;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
text-align: center;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
text-align: center;
}
input[type="text"] {
text-align: center;
}

上述代码中，大家针对各大主流浏览器都做了适配，使用了不同的浏览器私有前缀、伪类，实现了文本框内文字与提示信息的文本居中显示。

如果你需要让多行输入框中的文字居中，可以使用textarea元素，并设置其text-align属性为center。

textarea {
text-align: center;
}

总结

通过CSS中的text-align属性，大家可以轻松地实现输入框中文字居中显示的效果。在实际开发中，也可以根据实际情况使用不同的选择器和伪类来适配各大浏览器和元素。