输入内容

terry 2年前 (2023-09-07) 阅读数 236 #Html5

文章标签 input text-align

文本居中的方法我跟大家总结一下输入文本框内容居中的几种方法。我希望它能帮助你。

文本对齐

<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>