html - 我如何让这个 div 到中心？

Question

所以，我目前得到了这个:

http://gyazo.com/5d30270a775462fef170283162a9152e

如何让第二种表格与按钮位于同一位置，即居中？几乎什么都试过了，想不出别的。

请帮帮我!

当前代码:

    .flat-table {
  display: inline-block;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 115%;
  overflow: auto;
  width: 90%;
  text-align: center;
  float: right;

  }
  th {
    background-color: #f95252;
    color: white;
    font-weight: normal;
    padding: 20px 30px;
    text-align: center;
  }
  td {
    background-color: #fff;
    color: rgb(111, 111, 111);
    padding: 20px 30px;
  }

这是表格的代码。

怎么办？

谢谢!

Answer 1

确保周围的 div 是 float 的，并使用以下命令将 div 中的所有内容对齐到中心:margin: 0 auto;

看看这个example :

<div class="top">menu</div>
<div class="middle">
    <table>
        <tr><td>test1</td></tr>
        <tr><td>test2</td></tr>
    </table>    
</div>
<div class="bottom"><a href="#">button</a></div>

CSS:

.top {
    height: 40px;
    width: 100%;
    float: left;
    background-color: Red;
}
.middle {
    width: 100%;
    height: auto;
    float: left;
}
.middle table {
    width: 300px;
    background-color: grey;
    margin: 0 auto;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 115%;
}
.bottom {
    height: 40px;
    float: left;
    width: 100%;
    background-color: blue;
}
.bottom a {
    display: block;
    width: 100px;
    margin: 0 auto;
    height: 20px;
    background-color: yellow;
    line-height: 20px;
    text-align: Center;
    margin-top: 10px;
}
th {
    background-color: #f95252;
    color: white;
    font-weight: normal;
    padding: 20px 30px;
    text-align: center;
}
td {
    background-color: #fff;
    color: rgb(111, 111, 111);
    padding: 20px 30px;
}