我想用响应式设计理念构建我的网站。但我已经尝试过 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">
最佳答案
#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 **/
}
}
关于html - 当媒体小于 980px 时，我想将表格居中。我尝试了边距和文本对齐。他们不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36673238/