html - div 中的中心表

Question

我在一个 div 中有一个表，它使用来自 twitter bootstrap 的 span12 类，它包含在一个行类 div 中，全部被一个页脚标记包围，如下所示:

<footer class="footer">
        <div class="row">
          <div class="span12">
            <table>
              <tr>
                <td> <!-- Contact Us -->
                  <table>
                    <tr>
                      <td><b>Contact Us</b></td>
                    </tr>
                     <tr>
                      <td>Tel: 01234 567897</td>
                    </tr>
                     <tr>
                      <td>E-mail: info@email.com</td>
                    </tr>
                   </table>
                </td>

                <td> <!-- Useful Links -->
                  <table>
                    <tr>
                      <td><b>Useful Links</b></td>
                    </tr>
                    <tr>
                      <td><a href="#">Contact Us</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">About Us</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Copyright Information</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Terms & Conditions</a></td>
                    </tr>
                   </table>
                </td>

                <td> <!-- Social -->
                  <table>
                    <tr>
                      <td><b>Connect With Us</b></td>
                    </tr>
                    <tr>
                      <td><a href="#">Facebook</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Twitter</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Google Plus</a></td>
                    </tr>
                   </table>
                </td>
              </tr>
            </table>
         </div>
        </div>
      </footer>

我应用了以下 CSS:

/* Table Style */

    .footer table {
        table-layout:fixed;
        margin-right: auto;
        margin-left: auto;
        width: 100%
    }

    .footer td b {
        vertical-align:top;
        color: #ccc2a0;
    }

    .footer td {
        vertical-align:top;
        color: #a8a8a8;
    }

我试图让页脚左侧和第一个表格数据之间的空间与页脚右侧和最后一个表格数据之间的空间相同，但是它总是有更大的差距右边。

有人能看出我使用的 CSS 有问题吗？

谢谢

编辑:下面是尝试使用 div 实现此目的的代码:

<footer class="footer">
    <div class="row" style="background-color:red;">
      <div class="span12" style="background-color:orange;">
        <div class="span4" id="leftFooter">

        </div>
        <div class="span4" id="middleFooter">

        </div>
        <div class="span4" id="rightFooter">

        </div>
      </div>
    </div>
  </footer>

CSS 只是为框着色，这样我就可以看到发生了什么，并为 div 添加了一些高度。

灰色框是页脚 div，红色框是行，橙色框是 span12。其余的是 span4 的 3 个内容 div。不知道为什么他们不在同一行。

Answer 1

我更改了其中的一些内容并删除了所有样式(抱歉)，但是您的间距应该水平固定。您可以明智地应用任何您想要的样式。另外，我去掉了所有嵌入的表格，因为它太麻烦了……如果你愿意，我可以调整垂直间距，但我只是把它们放在一起，让你了解水平间距。

http://jsfiddle.net/YYZwY/1/

HTML:

<footer class="footer">
  <table>
    <td>
                <div id="ContactUS" class="information">Contact Us</div>
                <div id="Telephone" class="information">Tel: 01234 567897 </div>
                <div id="email" class="information">Email: info@email.com</div>
    </td>
    <td>
                 <div class="links">Useful Links</div>
                 <div class="links"><a href="#">Contact Us</a></div>
                 <div class="links"><a href="#">About Us</a></div>
                 <div class="links"><a href="#">Copyright Information</a></div>
                 <div class="links"><a href="#">Terms & Conditions</a></div>
    </td>
    <td>
                 <div class="connect"><b>Connect With Us</b></div>
                 <div class="connect"><a href="#">Facebook</a></div>
                 <div class="connect"><a href="#">Twitter</a></div>
                 <div class="connect"><a href="#">Google Plus</a></div>
    </td>
</footer>

CSS:

.links {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.connect {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.information {
    padding-right: 10px;
}