输入内容
文本居中的方法我跟大家总结一下输入文本框内容居中的几种方法。我希望它能帮助你。
文本对齐
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="前端教程网" />
<title>前端教程网</title>
<style>
input{
width: 400px;
height: 60px;
line-height: 60px;
text-align: center;
}
</style>
</head>
<body>
<input type="text" value="HelloWorld"/>
</body>
</html>
我们可以使用css属性text-align:center来达到内容居中的目的。另外,需要注意的是:输入内容框默认会垂直居中。上述代码的效果如下图所示:

内置样式
我们也可以直接使用inline来达到同样的效果。代码如下:
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="前端教程网" />
<title>前端教程网</title>
</head>
<body>
<input type="text" style="text-align:center;" value="HelloWorld"/>
</body>
</html>
版权声明
本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。