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