ChromeとFirefoxのセンターフォーム

Question

シンプルなログインフォームがあり、Internet Explorerを中心にしていますが、ChromeとFirefoxではページの左側に揃っています。フォームを他の2つのブラウザの中央に置くには、私は何をする必要がありますか？

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

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。

セマンティックとCSSのためにHTMLタグを使用して、ページにどのように表示するかをブラウザに伝える必要があります。

は今すぐ次の点を考慮してください

<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の場合は、フォームの幅を200ピクセルに設定し、marginプロパティを使用して中央に配置します。

また、input要素には、それぞれ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>