Question

我正在尝试将一些文本对齐到加载序列的底部。我认为最好的方法是使用vertical-align。麻烦的是，这是行不通的。我有代码here的副本。 HTML：

<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>

CSS：

#bg_loader {
    width: 100%;
    height: 100%;
    z-index: 100000000;
    background-image: url(../images/loading/myhhub_loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}
#bg_loader:before {
    content: "Thank You for Waiting";
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

我已经就此事进行了广泛的研究。从我可以告诉它应该工作。但是，我使用伪元素来插入我的文本＆amp;我还没有找到关于vertical-align＆amp; amp;在这些特殊类型的案件中是假的。

我发现这篇文章非常有用：Vertical-Align: All You Need To Know

我想知道为什么vertical-align不起作用。我也愿意接受更好的方法，如何将我的文本放在我的加载序列下面。我知道calc（），这是我目前使用的。

CSS：

#bg_loader:before {
    content: "Thank You for Waiting";
    display: inline-block;
    position: absolute;
    bottom: calc(60% - 14em);
    width: 100%;
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

更新

我对Pangloss的代码（下面标记的答案）进行了一些编辑，以使编码更具动态性： jsfiddle

#bg_loader:after {
    content: "Thank You for Waiting";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 13.86em;
    line-height: calc(100% + (13.86em * 2) + 1.575em);
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

基本上，我没有给：after元素一个固定的icky像素填充，而是给它一个与图像相同的高度（在漂亮的流动em值中）＆amp;计算一个行高，使文本在底部带一些填充。

现在，显然，这仍然需要一些工作，因为这与firefox（Firefox does not support calc() inside the line-height...不兼容。我也注意到了iPad中的问题。我目前正在努力诊断问题。

我会尽量保持这篇文章的更新。（My progress will be tracked here.）

Answer 1

使用relative和absolute关系表示父元素和伪元素，可以让您更好地控制定位。我补充说：

#bg_loader {
    position: relative;
}

#bg_loader:before{
    text-align: center;
    position: absolute;
    top: calc(50% + 120px);
}

使用calc()是维持pos的最佳方式。控制我的经验，并简单地使用text-align。这也将在移动领域“灵活”。

检查更新后的fiddle 还有一些lite reading

Answer 2

如果在内联块元素上设置vertical-align，它实际上是对元素本身进行操作，而不是内部的内容，并且该元素的高度为100％，因此没有任何反应，这是主要问题。

其次，valign位置实际上相对于兄弟元素＆＃39;高度（通常是最高的）。你的例子中没有任何兄弟姐妹。您所遵循的指南非常好，您可以再次阅读，但要更仔细。

更新了代码段：

#bg_loader:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#bg_loader:after {
    content: "Thank You for Waiting";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding-top: 270px; /*spacing*/
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

完整的工作示例：

jsfiddle

＆＃13;

html{
    height: 100%;
    min-height: 100%;
    overflow-y: scroll;
}
body{
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background-color: #F1FAFC;
    background-attachment: fixed;
    font-size: 80%;
    margin: 0;
}
#bg_loader {
    width: 100%;
    height: 100%;
    z-index: 100000000;
    background-image: url(../images/loading/myhhub_loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}
#bg_loader:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#bg_loader:after {
    content: "Thank You for Waiting";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding-top: 270px;
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

＆＃13;

<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>

＆＃13;

麻烦垂直对齐文本到窗口/视口的中间

2 个答案: