无法在 CSS 中居中表格（Internet Explorer）答案

【问题标题】：Unable to center table in CSS (Internet explorer)无法在 CSS 中居中表格（Internet Explorer）
【发布时间】：2014-10-30 01:06:16
【问题描述】：

居中和对齐在 Chrome 和 Firefox 上运行良好。我已经有一段时间没有做 HTML/CSS 了，所以我不确定我做错了什么。我已经四处搜索，但没有任何表格居中对我有用。

小提琴：http://jsfiddle.net/y6n7ufL9/2/

    /* different things I tried to get to work */
    #table {
      display: table;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      table-layout: auto;
    }

    body {
      background-color: #ececec;
    }
    #navborderline {
      width: 50%;
      margin: auto;
      margin-top: 5px;
      height: 2px;
      background-color: black;
    }
    #navborder ul {
      text-align: center;
    }
    #navborder ul li {
      list-style-type: none;
      display: inline;
      margin-left: 5%;
      margin-right: 5%;
    }
    #navborder a {
      text-decoration: none;
      color: black;
      font-size: 18px;
      border-bottom: 1px solid transparent;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out;
    }
    #navborder a:hover {
      border-bottom: 1px solid red;
    }
    #navborder {
      margin-top: 10px;
    }
    #table {
      width: 60%;
      margin: auto;
      margin-top: 5px;
      text-align: center;
    }
    #table td,
    tr {
      border: 1px solid black;
      width: 50%;
    }

<html>

<head>
  <title>Travis' Portfolio</title>
  <link rel="stylesheet" type="text/css" href="css/css.css" />
  <!--[if IE]>
                <link rel="stylesheet" type="text/css" href="css/ie.css" />
            <![endif]-->
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>

<body>
  <div id="navborder">
    <ul id="ie">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Assignments</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <li><a href="#">Random</a>
      </li>
    </ul>
  </div>

  <div id="mainbody">
    <table id="table">
      <thead>
        <tr>
          <td colspan="2">Ello</td>
        </tr>
      </thead>
      <tr>
        <td>Hello</td>
        <td>hello v2</td>
      </tr>
      <tr>
        <td>Hello</td>
        <td>hello v2</td>
      </tr>
    </table>
  </div>

  <div id="mainfooter"></div>
</body>

</html>

【问题讨论】：

老兄......只需删除菜单项上的填充。由于默认的 UL css，它们偏离中心约 10 像素。
凯西，这并不能解决问题。如果您想知道的话，我已经进行了重置。
很抱歉，但我没有看到问题:(...我看到的任何东西都没有发生。通过删除填充，它在我所有的浏览器中居中已经测试过了……有没有更完整的区域可以查看。
@CayceK 你知道你用的是什么版本的IE吗？
我检查了所有这些...您仍然没有看到这方面的进展吗？我可能需要尝试别的东西，但在我能做到之前还需要一点时间:(

标签： html css

【解决方案1】：

实际上，我认为是您的菜单不太居中（或者至少是li）。可能与不影响 inline 元素的边距有关。

Jsfiddle Demo

#navborder ul li {
    list-style-type:none;
    display:inline-block; /* not just inline */
    margin-left:5%;
    margin-right:5%;
}

【讨论】：

我已经进行了重置。由于我不认为 JSFiddle 并将其粘贴在此处，因此将链接到包含代码的不同页面，以便您可以更全面地看到它，而不是剪切和减少 sn-ps。 HTML：pastebin.mozilla.org/7007613 Main CSS：pastebin.mozilla.org/7007615 IE CSS 与 main CSS 相同。重置 CSS：pastebin.mozilla.org/7007617

【解决方案2】：

您是否尝试过让包含表格文本的 div 对齐

#mainbody{
text-align: center;
}

我认为它可能有效

【讨论】：