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

【问题标题】：How to align table to middle of the page, not just the text如何将表格与页面中间对齐，而不仅仅是文本
【发布时间】：2015-09-11 10:31:20
【问题描述】：

我知道这个问题可能已经被问过百万次了。我已经尝试了所有我找到的解决方案，但无法得到我需要的东西。我需要将<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;
}

【问题讨论】：

我试过了..它不起作用

标签： html css twitter-bootstrap html-table

【解决方案1】：

.table {
  margin: auto;
}

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

【讨论】：

【解决方案2】：

首先，结尾</table> 标记丢失。这段代码应该适合你：

.container .table {
    margin:0 auto;
}

<div class="container">
    <table class="table">
        <tr><td><img src="http://placehold.it/50x50" class="img-responsive" ></td></tr>
        <tr><td><img src="http://placehold.it/50x50" class="img-responsive" ></td></tr>
        <tr><td><img src="http://placehold.it/50x50" class="img-responsive" ></td></tr>
    </table>
</div>

【讨论】：

我看到图像居中。有什么问题？
我尝试删除网格线，但仍然左对齐。
aaaaaa

bbbbbbb

ccccccc

css---- .container .table .borderless { margin:0汽车; } .borderless tbody tr td，.borderless tbody tr th，.borderless thead tr th { 边界：无； }

【解决方案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>

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

【讨论】：

w8 我会为你创建一个 jsfiddle

【解决方案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>

【讨论】：

.img-responsive 到底有什么东西需要这么乱？！我知道您已经解决了您的问题，但为了将来参考，请在 CSS 中编辑您的问题中的.img-responsive（或在代码中添加非停滞链接）。