当媒体小于 980px 时，我想将 table 居中。我尝试了边距和文本对齐。他们不工作

Question

我想用响应式设计理念建立我的网站。但我已经尝试了 margin: 0 auto 和 text-align: center。两者都无法帮助 table 居中。我已经尝试禁用一些可能影响元素的样式，例如 chrome 开发人员工具中的 right: 30px/ float: right。但是我还是找不到原因。

我的网站在 http://php-kkhchan.rhcloud.com 我想将位于顶部的 table 居中。我所有的响应式设计设置都取决于 CSS.

@media screen and (max-width: 980px) {
    #searchBox, #tab, #weaExp, #weaAud, .desktop, svg {
        display: none;
    }

    #tblhead {
        float: left;
        right: auto; //it is to override the style from normal view
        margin-left: 30px; //since I am unable to set it to center. I now only to set it align to left.
    }
}

下面是我的html代码的一部分：

<body text="#000000">
<table id="tblhead"><TR>
<TD style="width:145px;"><?php include("login.php") ?></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><a id="fb_qr" href="lib/qr.htm"><span id="myQR" class="myButton" tabindex="4">QR</span></a></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><a id="fb_map" href="lib/map.htm"><span id="myMap"  class="myButton" tabindex="4">Map</span></a></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><a id="fb_mo" href="/mobile/index.php"><span id="ver"  class="myButton" tabindex="4">Mobile</span></a></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><span id='weaBox'><p id='weaTmp'></p></span></TD>
<TD><span style="float: right;margin-right: 10px;"> | </span></TD>
<TD><article id="clkBox"><span id="clkText" onClick="clkChgColor();"></span></article></TD>
</TR></table>

顺便说一句，我尝试添加以下语句，使屏幕布局像移动设备一样。但我想知道为什么结果是变焦会很高。 1/3 内容超出边界无法查看

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 1

#tblhead 元素使用 position: fixed，因此您不能使用 margin: auto 将其居中。您可以使用此技巧将其居中：

@media screen and (max-width: 980px) {
    #tblhead {
        right: auto;
        left: 50%; /** left should 50% of parent - body because of fixed **/
        transform: translateX(-50%); /** move it back -50% of element itself **/
    }
}

Answer 2

我已经更改了#tabs div 的 css 属性。

#tabs {
    background: none !important;
    overflow: hidden;
    border-style: none;
    width: 900px;
    /* margin-left: 10px; */
    margin-left: 25%;
    /* position: fixed; */
    top: 10%;}

希望对您有所帮助。谢谢

Answer 3

尝试使用 margin-left 和 calc 的组合：

如果#tblhead宽度为900px

margin-left: calc(50% - 450px)

通过使用 #tblhead 容器宽度的一半减去 #tblhead 宽度的一半，#tblhead 将始终水平居中。使用 calc 时 重要的是要记住 将 space 保留在减号 - 左右（或加号 +，星号 *， ETC）。

Ex. Do this: calc(50% / 2), do not do this: ~~calc(50%/2)~~.

片段

html {
  width: 100%;
  height: 100%;
  font: 400 16px/1.45 'Verdana';
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: inherit;
  padding: inherit;
}
body {
  width: 100%;
  height: 100%;
  background: #222;
  color: #ddd;
  position: relative;
}
.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  padding: 2em;
}
#tblhead {
  table-layout: fixed;
  width: 900px;
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 20px 0;
  /* This is an important rule */
  margin-left: calc(50% - 450px); 
}
th {
  width: 32%;
  height: 15px;
  border: 2px solid #eee;
}
td {
  height: 20px;
  border: 2px inset #bbb;
}
@media screen and (max-width: 980px) {
  #tblhead {
    width: 520px;
    /* This is an important rule */
    margin-left: calc(50% - 260px);
  }
}

<!doctype html>
<html>

<head>
  <meta char="utf-8">
</head>

<body>
  <section class="box">
    <table id="tblhead">
      <thead>
        <tr>
          <th>HEAD</th>
          <th>HEAD</th>
          <th>HEAD</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>DATA</td>
          <td>DATA</td>
          <td>DATA</td>
        </tr>
        <tr>
          <td>DATA</td>
          <td>DATA</td>
          <td>DATA</td>
        </tr>
        <tr>
          <td>DATA</td>
          <td>DATA</td>
          <td>DATA</td>
        </tr>
        <tr>
          <td>DATA</td>
          <td>DATA</td>
          <td>DATA</td>
        </tr>
      </tbody>
    </table>
  </section>
</body>

</html>

当媒体小于 980px 时，我想将 table 居中。我尝试了边距和文本对齐。他们不工作

I would like to center a table when the media is under 980px. I tried margin and text-align. They are not working

html

css

responsive