1

我想要的是在页面加载时将“正在加载...”显示为简单的文本，并且我希望文本居中 - 水平和垂直。我浏览了很多示例，现在我有了某种似乎可行的解决方案，但我怀疑效果是否始终相同，并且我的代码甚至接近良好的 CSS。我有一个 index.php 页面，在<body>标签之后我有这个：

<body>

        <div id="loading-standard-user">
            <p id="loading-standard-user-text">Loading...</p>
        </div>

后来我有一个功能可以在页面加载时隐藏文本，但我关心的是<div>and<p>标签的样式。这是我的CSS：

#loading-standard-user {
  width: 100%;
}

#loading-standard-user-text {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-family: arial;
  top: 50%;
  margin-top: -40px;
}

我很确定我有一些不必要的代码，同时我错过了一些东西，我想知道的一件事是我的font-size: 40px这必须意味着如果我希望我的代码稍后垂直居中，我margin-top的值应该相等到我字体大小的一半，但在视觉上它看起来margin-top是居中的字体大小。无论如何，关于造型的任何想法，我的错误在哪里，我怎么能做对？

谢谢

勒隆

4

2 回答 2

2

您的 CSS 代码似乎几乎完全符合您的要求。我能找到的唯一问题是你的 margin-top 应该是高度的-50%。您的 div 高度是 40px（这是字体大小），因此您的 margin-top 应该是 -20px 以使其准确居中。

更详细地说：top: 50%将文本的顶部设置在容器的中间。然后margin-top: -20px将其向上移动 20px 以使其居中。

编辑：如果你想使用em，就像@mgibsonbr 建议的那样，试试下面的CSS：

#loading-standard-user {
  position: fixed;
  width: 100%;
  height:40px;
  top: 50%;
  margin-top: -2em;

}

#loading-standard-user-text {
  width: 100%;
  text-align: center;
  font-size: 4em;
  font-family: arial; 
}
于 2012-05-22T08:20:42.013 回答
1

似乎没有必要，您的#loading-standard-user示例仅使用第二条规则就可以正常工作（至少在 Firefox 和 Chrome 上）。（您在position: fixed内部 div 上使用的事实使您放置外部无关紧要）

对于topandmargin-top问题，它可能看起来像是居中的，但这并不意味着它实际上是：

在此处输入图像描述

如果您担心稍后调整文本大小，我建议您使用em而不是px设置您的大小，这样当用户调整浏览器文本大小时它们会自动调整。1 em是大写“M”1 ex的高度，而是小写“x”的高度。

（不幸的是，在实践中我无法让它工作，em而px它工作得很好。也许我错过了什么？）

于 2012-05-22T08:32:06.343 回答