valign

valign

关注
发信
关注(28)粉丝(399)

垂直将文本对齐到窗口/视口中间

本文介绍了垂直将文本对齐到窗口/视口中间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图将一些文本对齐到加载序列的底部&我认为最好的方式得到部分方式在那里是使用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的代码做了一些编辑（标记下面的答案），使编码更有活力：

  #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兼容（。我已经注意到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:

jsfiddle

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>

这篇关于垂直将文本对齐到窗口/视口中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 00:59
Powered by LMLPHP ©2024 valign 0.051385