如何将表格与页面中间对齐，而不仅仅是文本

Question

我知道这个问题可能已被问过百万次了。我已经尝试了我找到的所有解决方案，但无法获得我需要的解决方案。我需要将<table>对齐到页面中间并删除网格线。

我的代码：

HTML

<div class="container">
<table class="table">
<tr><td><img src="disc_uni.png" class="img-responsive" ></td></tr>
<tr><td><img src="how_to_apply.png" class="img-responsive" ></td></tr>
<tr><td><img src="stud_sup.png" class="img-responsive" ></td></tr>
</div>

CSS

.container {
    display: table;
    vertical-align: middle;
}

Answer 1

.table {
  margin: auto;
}

尝试添加上面的CSS，看看它是否有帮助。干杯

Answer 2

首先，缺少结束const Foo f; 标记。这段代码应该适合你：

</table>

.container .table {
    margin:0 auto;
}

Answer 3

我用jsfiddle更新了我的答案，让你看到它正常工作http://jsfiddle.net/elviz/ekjfzL4r/

     <div class="container">
           <center>
              <div class="newly_div">    
              <table class="table">
              <tr><td><img src="disc_uni.png" class="img-responsive" ></td></tr>
              <tr><td><img src="how_to_apply.png" class="img-responsive" ></td></tr>
              <tr><td><img src="stud_sup.png" class="img-responsive" ></td></tr>                                               
              </div>
          </center>                    
    </div>

请注意我添加了另一个div new_div，jsfiddle显示它正在工作谢谢！

Answer 4

我自己找到了解决方案.. 这个问题是由img-responsive类引​​起的，当我删除img-responsive类时，它的工作正常，无论我们使用什么方法来集中表。

但是包含了img-responsive类，下面的代码对我有用。谢谢所有回复的人。

CSS

.table.borderless{
  table-layout: fixed;
    max-width: 500px;
        text-align: center;
        margin-right: auto;
  margin-left: auto;


}

.table.borderless tbody tr td{
    border: none;
text-align: center;
}

.img{
display: block;
margin-right: auto;
  margin-left: auto;
}

HTML

<table class="table borderless">
<tr>
<td><img src="disc_uni.png" class="img-responsive img" ></td><td style="text-align:justify" ><br></br></td>
</tr>
<tr><td><img src="how_to_apply.png" class="img-responsive img" ></td><td>university</td></tr>
<tr><td><img src="stud_sup.png" class="img-responsive img" ></td><td>university</td></tr>
</table>