Chrome和Firefox中的中心表格

我有一個簡單的登錄表單，它位於Internet Explorer中，但在Chrome和Firefox中，它與頁面左側對齊。我需要做什麼才能讓表單在其他2個瀏覽器中居中。Chrome和Firefox中的中心表格

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

來源

2016-08-03 Steve D

嘗試形式{保證金：0汽車;}在你的CSS –

看到沒工作 –

嘗試形式寬度改變到100％。這個例子

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

來源

2016-08-03 03:02:34

這並沒有工作 –

你應該避免使用HTML表來定義你的頁面佈局。 Here's a good overview on why tables should not be used for layout。

您應該依靠HTML標記語義和CSS來告訴瀏覽器他應該如何在頁面中顯示內容。

現在考慮以下幾點：

<style> 
    form { 
    width: 200px; 
    margin: 0 auto; 
    } 

    input { 
    display: block; 
    margin: 5px 0; 
    } 
</style> 

<form name="form1" method="POST" action="/"> 
    <h1>Client Login</h1> 

    <input name="myusername" type="text" id="myusername" placeholder="Company Name" size="24"> 
    <input name="mypassword" type="password" id="mypassword" placeholder="password" size="25"> 
    <input name="Submit" type="submit" class="submit_button" value="Login"> 
</form>

的HTML被剝離下來到裸必要：你的標題，然後你的表單元素。這裏的形式是主要容器。使用CSS，我們告訴表單具有200px的寬度，我們使用margin屬性來居中。

我們還告訴input元素顯示爲塊元素來填充它的容器，這樣它們每個佔據1行。

學習CSS是從不同的含義外觀有用，here's a great demonstration of the relation between content, container and design.

來源

2016-08-03 03:14:00 mgadrat

我忘了提及使用CSS將導致更好的跨瀏覽器兼容性 – mgadrat

感謝這工作，我將從現在開始做這樣的所有表單。 –

如果我的答案解決了您的問題，您應該加快行動並「接受它」。 [這是如何]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）; 引用帖子：「接受答案非常重要，因爲它既獎勵解決問題的海報，又告訴其他人您的問題已得到解決。」 – mgadrat

你介意嘗試這個也許:)

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

來源

2016-08-03 03:51:00

Chrome和Firefox中的中心表格

回答

相關問題