-1

ページの中央に配置したいテーブルとフォームがあります。右側と左側に幅50％の空白のテーブル列を配置することで、IEの中央に配置できましたが、ChromeやFirefoxでは同じ結果が得られませんでした。テーブルを中央に配置する必要があります。私がこれまでに得たものは次のとおりです。

 table {
       width:580px;
       margin-left: auto;
       margin-right: auto;
       }
 form {
      width:580px;
      margin:0 auto;
      }

現在、テーブルは左揃えで表示されていますが、中央に配置する必要があります。

追加情報：

label {
    padding-right:10px;
    text-align:left;
    {
table   {
    width: 580px;
    margin-left: auto;
    margin-right: auto;
    }

.centerspacer {
    width:50%;
    }

td {
    padding:5px;
    }
.center {
    text-align:center;
    }

form    {
    width: 580px;
    margin: 0 auto;
    }


</style>

</head>
<body>


<form action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">


<table>

<tr>
<td class="centerspacer"></td>
<td><label  for="first_name">First Name</label></td>
<td><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" />    </td>
<td class="centerspacer"></td>
</tr>
<tr>

<td class="centerspacer"> </td>
 <td><label  for="last_name">Last Name</label></td>
<td><input  id="last_name" maxlength="80" name="last_name" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>

<tr>
<td class="centerspacer"> </td>
<td><label  for="email">Email</label></td>
<td><input  id="email" maxlength="80" name="email" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>

<tr>
<td class="centerspacer"></td>
<td><label  for="phone">Phone</label></td>
<td><input  id="phone" maxlength="15" name="phone" size="20" type="text" /></td>
<td class="centerspacer"></td>
</tr>

<tr>
<td class="centerspacer"></td>
<td><label  for="company">Company</label></td>
<td><input  id="company" maxlength="40" name="company" size="20" type="text" /></td>
<td class="centerspacer"></td>
</tr>

<tr><td class="centerspacer"></td>
<td>
<label  for="city">City</label></td>
<td><input  id="city" maxlength="40" name="city" size="20" type="text" /></td>
<td class="centerspacer"></td>
</tr>

<tr>
<td class="centerspacer"></td>
<td><label  for="state">State/Province</label></td><td><input  id="state" maxlength="20"     name="state" size="20" type="text" /></td>
<td class="centerspacer"> </td>
</tr>


</form>
4

3 に答える 3

1

あなたのcssが問題です：

label {
  padding-right:10px;
  text-align:left;
{  <-----------------  wrong direction ;-)
于 2012-11-29T21:08:28.697 に答える
0

このように中央の div でテーブルをラップしてみることができます

HTML

<div>
    <table>
        <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>    
    </table>
</div>
<form>
    <label><input type="text"/>Label</label>
</form>

CSS

div {
    width: 580px;
    margin: 0 auto;
}
table {
    background: red;
    width:580px;
    margin-left: auto;
    margin-right: auto;
}
form {
    background: blue;
    width:580px;
    margin:0 auto;
}​

ここでフィドルを参照してください - http://jsfiddle.net/DsbMT/1/

于 2012-11-29T20:38:59.247 に答える
-1

編集:

これを試して

table.inner {
float:right;width:50px
}

ソース

http://www.sitepoint.com/forums/showthread.php?588052-center-align-in-google-chrome-and-fireFox

于 2012-11-29T20:35:15.637 に答える