我有一个相当简单的网站，我为手机、平板电脑和台式机设置了该网站。使用媒体查询来相应地格式化 CSS。挑战是该站点是基于 PHP 的、动态的，并且不使用屏幕的整个宽度。页面有两个表格，并排，左对齐，每个 500 像素宽。所以我的桌面例如是 1388px 宽。将标题居中使其偏离两个表格中间的中心。所以我补充说：
.centering {width:1020px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.6em; font-family: Sans-serif; font-weight:bold;}
到页面顶部标题的段落标签。好的，很好，我只是对展示位置进行了硬编码。为每个具有不同宽度的媒体查询设置一个 .centering，因为每个设备的表格宽度不同。所以它可以工作，有一个用于桌面，一个用于 iPad 横向，一个用于 iPad 纵向（纵向表调整一个在上面，一个在下面），各种 iPhone 版本和一些通用版本。在 iPad 风景和桌面上存在一个问题。
我提到它是 PHP 和动态的。用户可以传递他们不想看到第二个表的 PHP URL。（例如http://www.myurl.com/test.php?showsecond=0）。很好，但是现在我有一个 500 像素的表格，以及一个以 1020 像素宽度为中心的标题。但是现在宽度只有 500px。我尝试根据设置动态加载各种样式，但由于某种原因，当我从文件中加载样式时，而不是在物理页面中，它有些奇怪。就像两行文本之间的额外空间。无论如何，有什么建议如何处理这个标题吗？是否有像 div 之类的元素或我可以在整个页面周围放置的元素，它将确定当前页面宽度（基于内容），并且居中的标题将自动正确地适应它，而无需为它硬编码宽度信息？尤其是在同一设备上以相同方向动态变化的页面宽度？
这是一些附加图像，因为我想我被告知我写了很多。在桌面上，我有一个带有两张图片的网页：
如果网站让我张贴图片，您会在浏览器窗口的右侧看到一个左对齐的两张桌子，上面有很多空白。
当 PHP 通过 URL 设置为不显示我得到的第二个表时：
如果网站让我发布图片，您会在浏览器窗口的右侧看到一个左对齐的单表，其中有更多的空白。
如您所见，标题不会根据较小的内容重新定位，并且页面不使用全屏，因此不希望它以“页面宽度”为中心。
这是我做初始中心的媒体查询
<code><pre>
@media only screen and (min-width : 1224px)
{
th { font-size: 1.6em; font-family:Sans-serif; }
td { font-size: 1.65em; line-height: 1em; font-family:Sans-serif;}
h1 { font-size: 1.75em; line-height: 1.5em; }
h2 { font-size: 1.25em; }
table { width: 500px; align: left; }
.centering {width:1020px; padding-top:5px;
border:0; margin-top:2px; text-align: center;
font-size: 1.6em; font-family: Sans-serif;
font-weight:bold;}
}
</code></pre>
和我的 PHP 输出标题：
echo "<p class='centering'>Pool Mining: " . strtoupper($obj['multiport']['mining']) . "</center></p>";
想法？
谢谢。