垂直将文本对齐到窗口/视口中间 [英] Trouble Vertically Aligning Text to Middle of Window/Viewport
问题描述
我试图将一些文本对齐到加载序列的底部&我认为最好的方式得到部分方式在那里是使用vertical-align。麻烦的是，不工作。
我有一个代码的副本在这里。
HTML：
< div id =bg_loaderstyle =background-image：url /www.myhhf.com/images/loading/myhhub_loading_4.gif );\"> ;</div>
CSS：
code> #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;
width：100％;
height：100％;
vertical-align：middle;
text-align：center;
font-size：140％;
font-weight：bold;
color：＃080;
}
我已经对此事进行了广泛的研究。从我可以告诉它应该工作。然而，我使用一个伪元素来插入我的文本&我没有能够找到很多关于vertical-align&
我发现这篇文章非常有用：垂直对齐：您需要知道的所有
我想知道为什么vertical-align不工作。我也打开更好的方法，如何放置我的文本下面我的加载序列响应。我知道calc（），它是我目前使用的。
CSS：
#bg_loader：before {
content：谢谢你等待;
display：inline-block;
position：absolute;
bottom：calc（60％ - 14em）;
width：100％;
text-align：center;
font-size：140％;
font-weight：bold;
color：＃080;
}
更新： b
我对Pangloss的代码做了一些编辑（标记下面的答案），使编码更有活力：
jsfiddle
#bg_loader：{
content：谢谢等待;
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元素一个固定的填充像素，我给它一个与图像相同的高度（在美丽的flowy em值）&
现在，显然，这仍然需要一些工作，因为这将不会与Firefox Firefox兼容（ Firefox不支持在line-height内部使用calc（）... 。我已经注意到iPad中的问题，我目前正在诊断这个问题。
我会尽量保持更新这篇文章（我们将跟踪此进度）
如果在内联块元素中设置 vertical-align
其次，valign的位置实际上是相对于兄弟元素而言的高度（通常是最高的）。你的例子中没有任何兄弟姐妹。
更新后的程式码片段：
#bg_loader：before {
content：;
display：inline-block;
height：100％;
vertical-align：middle;
}
#bg_loader：after {
content：谢谢等待;
display：inline-block;
vertical-align：middle;
width：100％;
padding-top：270px; / * spacing * /
text-align：center;
font-size：140％;
font-weight：bold;
color：＃080;
}
全功能示例：
html {height：100％; min-height：100％; overflow-y：scroll;} body {width：100％;高度：100％; min-height：100％; overflow：hidden; background-color：＃F1FAFC; background-attachment：fixed; font-size：80％; margin：0;}＃bg_loader {width：100％;高度：100％; z-index：100000000; background-image：url（../ images / loading / myhhub_loading.gif）;背景重复：无重复; background-position：center;}＃bg_loader：before {content：; display：inline-block;高度：100％; vertical-align：middle;}＃bg_loader：after {content：谢谢等待; display：inline-block; vertical-align：middle; width：100％; padding-top：270px; text-align：center; font-size：140％; font-weight：bold; color：＃080;}
< div id = bg_loaderstyle =background-image：url（http://www.myhhf.com/images/loading/myhhub_loading_4.gif）;>< / div>
I'm trying to align some text to the bottom of a loading sequence & I think the best way to get part way there is to use vertical-align. The trouble is that is not working. I have a replica of the code 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;
}
I have done extensive research on the matter. From what I can tell it should be working. However, I am using a pseudo element to insert my text & I haven't been able to find much documentation on vertical-align & pseudo in these particular types of cases.
I found this article very useful: Vertical-Align: All You Need To Know
I would like to know why vertical-align is not working. I am also open to better methods of how to place my text below my loading sequence responsively. I am aware of calc(), it is what I am currently using.
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;
}
Update:
I made some edits to Pangloss's code (marked answer below) to make the coded a little more dynamic: 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;
}
Basically, instead of giving the :after element a fixed padding of icky pixels, I gave it a the same height as the image (in beautiful flowy em values) & a line-height calculated to bring the text to the bottom with a bit of padding.
Now, obviously, this is still going to need some work as this won't be compatible with firefox (Firefox does not support calc() inside the line-height.... I have also noticed issues in iPad. I am currently working to diagnose the issue.
I shall try to keep this post updated. (My progress will be tracked here.)
If you set vertical-align on a inline block element, it actually valign the element itself, rather the content inside, and that element is 100% height, so nothing happens, that is main issue there.
Secondly, the valign position is actually relative to the sibling elements' heights (usually the tallest one). And you there isn't any siblings in your example. The guide you have followed is very good, you can read it again, but more carefully.
Updated code snippet:
#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;
}
Full working example:
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;
}
<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>
这篇关于垂直将文本对齐到窗口/视口中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
