Question

我有一个相当简单的网站，我已经设置了手机，平板电脑和桌面。使用媒体查询相应地格式化CSS。挑战是该网站是基于PHP的，动态的，并不使用整个屏幕宽度。页面有两个表，并排，左对齐，每个宽度为500px。所以我的桌面是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像素的表，并且标题以1020px的宽度为中心。但宽度现在只有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>";

想法？

感谢。

Answer 1

将样式设置为：

<h1 style="text-align: center;">You title</h1>

如果您认为浏览器无法将文本居中，那么请检查您的桌面是否居中，如果没有检查您的眼镜;）

CSS自适应标题元素不是全宽

1 个答案: