1. 犀牛前端部落首页
  2. Html5教程

input内容居中方法

文本俺将跟大家总结几个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,来达到内容居中的目的,另外需要注意的是:input内容框会默认垂直居中,上面的代码效果如下图所示:

input内容居中方法

内联样式

我们还可以直接使用内联来实现同样的效果,代码如下所示:

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

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4271.html

发表评论

登录后才能评论