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浮动并使用以下内容将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;
}

我如何将这个div带到中心？

1 个答案: