Question

网页制作中如何将表单中的内容居中

Answer 1

有几种解决办法。

1、添加样式text-align: center; 内容居中。

2、给表单一个容器DIV，然后给DIV添加居中的样式。margin:0 auto ;

如果以上办法不能解决。可能是有一些兼容的问题、或者是受前面内容的影响。

那可以在表单的前面添加一个去除浮动的样式。

clear：both

比如这个例子： 就给表单form添加了一个容器table，并给table设置align=“center"居中的样式。

<table align="center" width="500" border="0" cellpadding="2" cellspacing="0">
			<caption align="center"><h2>LAMP学员基本信息</h2></caption>
			
			<form action="server.php" method="post">
				<tr>	<!--  使用输入域定义姓名输入框 --->
					<th>姓名：</th>
					<td ><input type="text" name="username" size="20" /></td>
				</tr>
				
				<tr>     <!-- 使用单选按钮域定义性别输入框 -->
					<th>性别：</th>
					<td>
						<input type="radio" name="sex" value="1" checked="checked" />男
						<input type="radio" name="sex" value="2" />女
						<input type="radio" name="sex" value="3" />保密
					</td>
				</tr>
				
				<tr>	<!--  使用下拉列表域定义学历输入框  -->
					<th>学历：</th>
					<td>
						<select name="edu">
							<option>--请选择--</option>
							<option value="1">高中</option>
							<option value="2">大专</option>
							<option value="3">本科</option>
							<option value="4">研究生</option>
							<option value="5">其他</option>
						</select>
					</td>
				</tr>
				
				<tr>	<!-- 使用复选框按钮域定义选修课程输入框 -->
					<th>选修课程：</th>
					<td>
						<input type="checkbox" name="course[]" value="4">Linux
						<input type="checkbox" name="course[]" value="5">Apache
						<input type="checkbox" name="course[]" value="6">Mysql
						<input type="checkbox" name="course[]" value="7">PHP
					</td>
				</tr>
				
				<tr>	<!-- 使用多行输入框定义自我[评价输入框 -->
					<th>自我评价：</th>
					<td><textarea name="eval" rows="4" cols="40"></textarea></td>
				</tr>
				
				<tr>	<!--  定义提交和重置两个按钮-->
					<td colspan="2" align="center">
						<input type="submit" name="submit" value="提交">
						<input type="reset" name="reset" value="重置">
					</td>
				</tr>
			</form>
		</table>