Question

我的页面上有一张桌子和表格，我希望能够集中注意力。我能够通过在左侧和右侧的空白表格列宽度为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>

Answer 1

你的CSS就是问题：

label {
  padding-right:10px;
  text-align:left;
{  <-----------------  wrong direction ;-)

Answer 2

您可以尝试将表格包装在像这样的中心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/

Answer 3

编辑：

试试这个

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

来源

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

在Chrome / Firefox中以中心对齐表格

3 个答案: