为什么我的桌子不能居中？答案

【问题标题】：Why wont my table center?为什么我的桌子不能居中？
【发布时间】：2018-07-09 03:57:51
【问题描述】：

我不明白为什么我的图片表不会保留在我页面的内容部分中。还想知道为什么我的页脚不会留在页面底部。我的页面需要如下图所示：

body {
  margin: 0px;
  padding: 0px;
}

.mainwrapper {
  width: 1024px;
  margin: 0 auto;
}

.pagebanner {
  height: 250px;
  margin: 0;
}

.pagebanner img {
  width: 100%;
  height: 100%;
}

.main {
  margin: 0;
}

.navbar {
  background-color: brown;
  min-height: 500px;
  width: 20%;
  float: left;
}

.navbar li {
  list-style: none;
  margin-bottom: 15px;
}

.navbar a {
  color: #fff;
  font-size: 20px;
}

.headersd {
  width: 80%;
  float: left;
  padding: 0;
  min-height: 500px;
}

.header {
  background-color: #000;
  text-align: center;
}

.header h1 {
  color: #fff;
  margin: 0;
}

.subheading {
  background-color: #f8d631;
  text-align: center;
}

.subheading h2 {
  background-color: #f8d631;
  margin: 0;
}

.table {
  align: center;
  padding-left: 50px border: 20px;
}

.footer {
  background-color: darkgreen;
  height: 20px;
  margin-bottom: 0px;
}

<div class="mainwrapper">
  <div class="pagebanner">
    <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
  </div>
  <!--PageBanner-->

  <div class="main">
    <div class="navbar">
      <ul>
        <li>
          <a href="#">Information</a>
        </li>
        <li>
          <a href="#">Home</a>
        </li>
      </ul>
    </div>
    <!--Navbar-->

    <div class="headers">
      <div class="header">
        <h1>The Club Site</h1>
      </div>
      <!--Main page heading section-->

      <div class="subheading">
        <h2>Members Prices</h2>
      </div>
      <!--Sub heading section-->
    </div>

  </div>
  <div class="content">
    <div class="table">
      <table>
        <th>Discount Prices</th>
        <tr>
          <td><img src="https://imgur.com/S1JVX6K" </td>
            <td><img src="https://imgur.com/uzkB81W" </td>
              <td><img src="https://imgur.com/YvnOW4s" </td></tr>
        <tr>
          <td><img src="https://imgur.com/f2wnDXT" </td>
            <td><img src="https://imgur.com/XiBYnS2" </td>
              <td><img src="https://imgur.com/mGcCorr" </td></tr>
      </table>
    </div>
    <!--Table Section-->

  </div>
  <!--Content section-->

  <div class="footer">
    <footer>wsrgferg</footer>
  </div>
  <!--Footer section-->
</div>
<!--Endwrapper-->

【问题讨论】：

请提供所有图片的绝对路径。我目前看到的是this。
我猜是页脚问题，我想是因为你的整个内容还没有到达浏览器的底部，所以还剩下一些空间。尝试添加更多元素，看看会发生什么
抱歉，现在应该修复了。至于页脚是否可以将其固定到导航栏部分的底部？
center table in HTML的可能重复

标签： html css html-table footer

【解决方案1】：

在table标签中添加margin:0 auto，将th改为h3，使h3text-align:center

<head>
    <meta charset="utf-8" />
    <title>Bazaar Ceramics</title>

<style>

body {
    margin: 0px;
    padding: 0px;
}

.mainwrapper {
    width: 1024px;
    margin: 0 auto;
}

.pagebanner {
    height: 250px;
    margin: 0;
}

.pagebanner img {
    width: 100%;
    height: 100%;
}

.main {
    margin: 0;
}

.navbar {
    background-color: brown;
    min-height: 500px;
    width: 20%;
    float: left;
}

.navbar li {
    list-style: none;
    margin-bottom: 15px;
}

.navbar a {
    color: #fff;
    font-size: 20px;
}

.headersd {
    width: 80%;
    float: left;
    padding: 0;
    min-height: 500px;
}

.header {
    background-color: #000;
    text-align: center;
}

.header h1 {
    color: #fff;
    margin: 0;
}

.subheading {
    background-color: #f8d631;
    text-align: center;
}

.subheading h2 {
    background-color: #f8d631;
    margin: 0;
}

.table {
    align: center;
    padding-left:50px
    border: 20px;
    }
.footer {
    background-color: darkgreen;
    height:20px;
    margin-bottom:0px;
}   
</style>

</head>

<body>

    <div class="mainwrapper">
        <div class="pagebanner">
          <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
        </div><!--PageBanner-->

    <div class="main">
        <div class="navbar">
            <ul>
                <li>
                    <a href="#">Information</a>
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
            </ul>
        </div><!--Navbar-->

    <div class="headers">
    <div class="header">
            <h1>The Club Site</h1>
    </div><!--Main page heading section-->

    <div class="subheading">
            <h2>Members Prices</h2>
    </div><!--Sub heading section-->
    </div>

    </div>
    <div class="content">
        <div class="table"> 
            <table style="margin:0 auto;" >
            <h3 style="text-align:center;">Discount Prices</h3>
            <tr><td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg"</td></tr>
            <tr><td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg"</td><td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg"</td></tr>
            </table>
        </div><!--Table Section-->  

    </div><!--Content section-->

    <div class="footer">
        <footer>wsrgferg</footer>
    </div><!--Footer section-->
    </div><!--Endwrapper-->

</body>



</html>

【讨论】：

标题有效，但将边距 0 auto 更改为表格样式并没有改变任何内容。
用替换你的表格标签（
）

我做了，没有效果。

然后你需要把你的代码放在像jsfiddle这样的运行环境中

啊，他们说我应该能够纯粹使用 html 和 css 来完成。应该可以吧？

【解决方案2】：

body {
  margin: 0px;
  padding: 0px;
}

.mainwrapper {
  width: 1024px;
  margin: 0 auto;
}

.pagebanner {
  height: 250px;
  margin: 0;
}

.pagebanner img {
  width: 100%;
  height: 100%;
}

.main {
  margin: 0;
}

.navbar {
  background-color: brown;
  min-height: 500px;
  width: 20%;
  float: left;
}

.navbar li {
  list-style: none;
  margin-bottom: 15px;
}

.navbar a {
  color: #fff;
  font-size: 20px;
}

.headersd {
  width: 80%;
  float: left;
  padding: 0;
  min-height: 500px;
}

.header {
  background-color: #000;
  text-align: center;
}

.header h1 {
  color: #fff;
  margin: 0;
}

.subheading {
  background-color: #f8d631;
  text-align: center;
}

.subheading h2 {
  background-color: #f8d631;
  margin: 0;
}

.table {
  align: center;
  padding-left: 50px border: 20px;
}

.footer {
  background-color: darkgreen;
  height: 20px;
  margin-bottom: 0px;
}

.content {
  min-height: 400px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Bazaar Ceramics</title>
</head>

<body>

  <div class="mainwrapper">
    <div class="pagebanner">
      <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
    </div>
    <!--PageBanner-->

    <div class="main">
      <div class="navbar">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Home</a>
          </li>
        </ul>
      </div>
      <!--Navbar-->

      <div class="headers">
        <div class="header">
          <h1>The Club Site</h1>
        </div>
        <!--Main page heading section-->

        <div class="subheading">
          <h2>Members Prices</h2>
        </div>
        <!--Sub heading section-->
      </div>

    </div>
    <div class="content">
      <div class="table">
        <table style="margin:0 auto;">
          <h3 style="text-align:center;">Discount Prices</h3>
          <tr>
            <td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg" </td>
              <td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg" </td>
                <td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg" </td></tr>
          <tr>
            <td><img src="HTML Pract A/images/smaller/bcpot002_smaller.jpg" </td>
              <td><img src="HTML Pract A/images/smaller/bcpot006_smaller.jpg" </td>
                <td><img src="HTML Pract A/images/smaller/bcpot013_smaller.jpg" </td></tr>
        </table>
      </div>
      <!--Table Section-->

    </div>
    <!--Content section-->

    <div class="footer">
      <footer>This is the Footer</footer>
    </div>
    <!--Footer section-->
  </div>
  <!--Endwrapper-->

</body>



</html>

如果您在.content 中添加一个绝对高度（如像素）的min-height，那么您的内容将始终使用此位置，并且您的页脚将位于您为内容提供的固定高度之下。

问题是您的内容仅使用了大约 20% 的屏幕，而在这 20% 的下方，您的页脚将附加到此。如果您向页面添加更多内容，则页脚将被按下，因为您的页面可能需要屏幕高度的 80%。

这不是最好的解决方案，因为它不是真正响应式的，但它确实有效。欢迎提供更好的解决方案。

【讨论】：

您需要在您的答案中发布您的代码，而不是第三方网站。链接失效了，您的回答将来对任何人都没有帮助。 stackoverflow.com/help/how-to-answer
@Rob 感谢您的评论，我会为未来的回答者注意这一点