CSS实现表单文字对齐方式

label文字对齐方式

表单的对齐方式分为三种
1、左对齐（默认对齐方式，一般不需要）

<form action="javascript:void(0)" method="post">
			<div>
				<label>用户名：</label>
				<input type="text" name="" id="" value="" />
			</div>
		    <div>
		    	<label>密码：</label>
				<input type="password" name="" id="" value="" />
		    </div>
		    <div>
		    	<label>电子邮箱：</label>
				<input type="email" name="" id="" value="" />
		    </div>
		</form>

这就是默认的对齐方式
2、右对齐方式：主要样式代码如下

<style type="text/css">
			label{
				/*右对齐*/
				display: inline-block;
				float: left;
				width: 300px;
				height: 40px;
				text-align: right;
			}
		</style>

结果为：

此时，文本都是往右边对其，相对而言叫好看些，跟人们带来一种视觉上的美感
3、居中对齐：居中对齐相对于现在的生活中不是很常用，但是也是我们必须要知道的

label{
				/*居中对齐*/
				display: inline-block;
				width:300px;
				height: 40px;
				line-height: 40px;
				text-align: justify;
				text-align-last: justify;
			}

结果为：