Question

我有一个简单的登录表单，它以Internet Explorer为中心，但在Chrome和Firefox中，它与页面左侧对齐。我需要做什么才能使表单在其他2个浏览器中居中。

CanActivate

Answer 1

尝试将表单宽度更改为100％。这个例子

<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>" style="width:100%;">

Answer 2

您应该避免使用HTML表来定义页面的布局。 Here's a good overview on why tables should not be used for layout

您应该依赖HTML标记语义和CSS来告诉浏览器他应该如何在页面中显示内容。

现在考虑以下事项：

location

HTML被剥离为必不可少的：您的标题然后是您的表单元素。这里的表格是主要的容器。使用CSS，我们告诉表单宽度为200px，我们使用margin属性来居中。

我们还告诉输入元素显示为块元素以填充它的容器，这样它们每个占用1行。

学习CSS有助于将外观与意义分开here's a great demonstration of the relation between content, container and design.

Answer 3

你能不能尝试这个：）

<style>
table  {
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>

<form name="form1" method="POST" action="<?php echo $loginFormAction; ?>">
 <td>
 <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
 <tr>
 <td colspan="4"><div align="center"><strong>Client Login</strong></div></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td><input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td><input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"></td>
 <td>&nbsp;</td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td><input name="Submit" type="submit" class="submit_button" value="Login"></td>
 <td>&nbsp;</td>
 </tr>
 </table>
 </td>
</form>

Chrome和Firefox中的中心表单

3 个答案: