無法在CSS中對齊表格（Internet Explorer）

居中和對齊在Chrome和Firefox上工作得很好。我有一段時間沒有做HTML/CSS，所以我不確定我做錯了什麼。我已經四處搜尋，沒有桌子居中對我有效。無法在CSS中對齊表格（Internet Explorer）

/* 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>

來源

2014-10-29 travis

豬頭...只是刪除的菜單項的填充。由於默認的UL css，它們偏離中心大約10px。 – 2014-10-29 17:10:20

Cayce，那不固定桌子。如果您想知道，我已經重置了位置。 – travis 2014-10-30 16:29:30

不好意思地說，但是我沒有看到問題：（...它不會發生在我看到的任何事情上。通過刪除填充，它將集中在我已經測試過的所有瀏覽器中。 – 2014-10-30 16:37:38

-1

你試圖給包含該表文本對齊的div

#mainbody{ 
text-align: center; 
}

我認爲它可能工作

來源

2014-10-29 17:05:21

其實，我認爲這是你的菜單不是很集中（或至少是li）。可能與邊距不會影響內嵌元素有關。

Jsfiddle Demo

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

來源

2014-10-29 17:06:16

它是填充。 – 2014-10-29 17:13:29

是啊...重置也會照顧這一點。 - http://jsfiddle.net/y6n7ufL9/11/ – 2014-10-29 17:23:29

我已經因爲我認爲JSFiddle並沒有粘貼在這裏，所以它會鏈接到包含代碼的不同頁面，這樣您就可以更完整地看到它，而不是剪切和縮小片段。 HTML：htt p：//pastebin.mozilla.org/7007613 主CSS：http://pastebin.mozilla.org/7007615 IE CSS與主CSS相同。重設CSS：http://pastebin.mozilla.org/7007617 – travis 2014-10-30 16:37:02

無法在CSS中對齊表格（Internet Explorer）

回答

相關問題