网页布局——注册页面的居中对齐

算法与编程之美

发布于 2022-05-23 15:10:30

1.6K00

代码可运行

文章被收录于专栏：算法与编程之美算法与编程之美

运行总次数：0

代码可运行

1问题描述

单纯的用form标签加div加input会使div里的元素在对齐上出现问题。如：

在这个网页中用户类别与用户性别与其他几项有很明显的区别——没有对齐，但我们所需要的又是要各项都对齐的网页。如：

2算法描述

网页中的元素没有对齐是因为我只用了div标签并使用text-align:center来使div里的元素居中，但用户类别与用户性别所占空间比其他几项要小，因此导致了页面内的元素没对齐。

解决方法：我们可以使用ul标签或table标签来使其对齐，达到我们所需要的结果。我采用的table标签来使其对齐

代码清单1

 <div id="div1">
 <h2>注册</h2>
 <table align="center">
 <tr>
 <td>用户姓名:</td>
 <td><input id="userman" type="text" autofocus required></td>
 </tr>
 <tr>
 <td>手机号:</td>
 <td><input type="text" id="identify"></td>
 <td><button>获取验证码</button></td>
 </tr>
 <tr>
 <td>输入验证码:</td>
 <td><input type="text"></td>
 </tr>
 <tr>
 <td>用户密码:</td>
 <td><input id="password" type="password" required></td>
 </tr>
 <tr>
 <td>确认密码:</td>
 <td><input id="surepassword" type="password" required></td>
 </tr>
 <tr>
 <td>用户类型:</td>
 <td><select name="type" id="userType">
 <option value="0">请选择</option>
 <option value="1">游客注册</option>
 <option value="2">商家注册</option>
 </select></td>
 </tr>
 <tr>
 <td>用户性别:</td>
 <td><input class="usersex" name="sex" value="boy" type="radio">男
 <input class="usersex" name="sex" value="girl" type="radio">女</td>
 </tr>
 <tr>
 <td>出生日期:</td>
 <td><input id="brithday" type="data"></td>
 </tr>
 <tr>
 <td>电子邮件:</td>
 <td><input id="email" type="email" required></td>
 </tr>
 <tr>
 <td></td>
 <td><input type="submit" class="button" onblur="checkform()" onclick='window.open("登录.html")' value="提交"></td>
 </tr>
 </table>
 </div>

3 结语

使用了table标签后，页面的各个元素都对齐了，达到了我们所需要的结果。

稿件来源：深度学习与文旅应用实验室（DLETA）

作者：王雷

主编：欧洋

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-04-28，如有侵权请联系 cloudcommunity@tencent.com 删除

center