问题描述
在为许多浏览器,移动设备和桌面开发网站时,我注意到以下CSS可以很好地集中加载div。
img.loading1 {
position:absolute;
剩下:50%;
margin-left:-16px;
top:50%;
margin-top:-16px;
z-index:10
}
.loading2 {
color:#006BB2;
位置:绝对;
剩下:50%;
margin-left:0px;
top:40%;
z-index:5
}
.loading3 {
position:absolute;
宽度:100%;
身高:100%;
剩下:0;
top:0;
background-color:lightgrey;
opacity:0.85
}
< div id =containerstyle =position:relative>
... content ommitted ...
< div id =loadingstyle =display:none>
< div class =loading3>< / div>
< img class =loading1src =images / loader-ajax.gifwidth =32height =32>
< span class =loading2id =getting>获取您的请求...< / span>
< / div>
... content ommitted ...
div的显示设置为'block'和3项中心很好。
但是,在移动屏幕上,当水平线位于右侧时,垂直位置可能不在屏幕上,具体取决于'包含'div的高度。
是否有可能找到屏幕的中心并定位图像并用Javascript跨越那里?
编辑1:必须将加载div的高度设置为屏幕高度才能使用? 每个绝对定位的元素都相对于一个容器定位。
如果未指定尺寸,则将具有绝对位置的元素收缩包装为其内容的大小。在JavaScript中计算大小时,根据其包含的内容返回的值是当前大小发生的情况。除非宽度或高度显式设置为100%,否则该元素将不会与其父级具有相同的大小。 不使用jQuery:
获取容器元素的x和y位置(相对于视口),视口的宽度和高度以及元素的宽度和高度。 p>
将顶部
设置为视口高度的一半,减去容器y的位置,减去元素高度的一半。
将 left
设置为视口宽度的一半,减去容器x的位置,减去元素宽度的一半。
//将一个绝对定位的元素居中在视口中。
function centerElementInViewport(el,container){
//默认参数
if((typeof container =='undefined')||(container === null))
//默认情况下,使用body标签作为相对容器。
container = document.body;
//获取相对于视口的容器位置。
var pos = container.getBoundingClientRect();
//将元素居中
var left =((window.innerWidth>> 1) - pos.left) - (el.offsetWidth>> 1); ((window.innerHeight>> 1) - pos.top) - (el.offsetHeight>> 1);
var top =
el.style.left = left +'px';
el.style.top = top +'px';
}
以下是。如果在jsfiddle中运行时出现问题,请尝试此 。
在IE7 / 8/9,Firefox,Chrome,Safari和Safari Mobile(iOS)上进行测试。到目前为止,唯一发现导致问题的是如果绝对定位的元素有余量(目前该功能不支持)。
未测试在一个响应式的设计中。
注意:小心在第一次加载页面时不要调用这个函数。如果浏览器被滚动或缩放然后重新加载,则该页面可能未被重新编译或缩放到原来的位置,并且得到的位置将不正确。在调用函数之前设置一个100毫秒的定时器似乎可行(允许浏览器重新滚动并重新缩放页面)。
While developing a site for many browsers, mobile and desktop, I've noticed that the following CSS works nicely to center a loading div.
img.loading1 {
position:absolute;
left:50%;
margin-left:-16px;
top:50%;
margin-top:-16px;
z-index:10
}
.loading2 {
color:#006BB2;
position:absolute;
left:50%;
margin-left:0px;
top:40%;
z-index:5
}
.loading3 {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background-color:lightgrey;
opacity:0.85
}
<div id="container" style="position:relative">
...content ommitted...
<div id="loading" style="display:none">
<div class="loading3"></div>
<img class="loading1" src="images/loader-ajax.gif" width="32" height="32">
<span class="loading2" id="getting">Getting your request...</span>
</div>
...content ommitted...
The div's display gets set to 'block' and the 3 items center great.
However, on a mobile screen, while the horizontal is right on, the vertical position could be off-screen depending on the height of the 'containing' div.
Is it possible to find the center of the screen and position the image and span there with Javascript?
Edit 1: Must the height of the loading div be set to be the height of the screen for this to work?
Related info:
Every absolutely-positioned element is positioned relative to a container. The default container is the body tag.
If no dimensions are specified, an element with absolute position is shrink-wrapped to the size of its content. When calculating the size in JavaScript, the value returned is whatever the current size happens to be, based on the content it contains. The element will not have the same size as its parent unless the width or height is explicitly set to 100%.
Without using jQuery:
Get the x and y location of the container element (relative to the viewport), the width and height of the viewport, and the width and height of the element.
Set the top
to half the viewport height, minus the container y position, minus half the element height.Set the left
to half the viewport width, minus the container x position, minus half the element width.
// Center an absolutely-positioned element in the viewport.
function centerElementInViewport(el, container) {
// Default parameters
if ((typeof container == 'undefined') || (container === null))
// By default, use the body tag as the relative container.
container = document.body;
// Get the container position relative to the viewport.
var pos = container.getBoundingClientRect();
// Center the element
var left = ((window.innerWidth >> 1) - pos.left) - (el.offsetWidth >> 1);
var top = ((window.innerHeight >> 1) - pos.top) - (el.offsetHeight >> 1);
el.style.left = left + 'px';
el.style.top = top + 'px';
}
Here's a jsfiddle demo. If there are problems running it in jsfiddle, try this standalone demo.
Tested it in IE7/8/9, Firefox, Chrome, Safari, and Safari Mobile (iOS). The only thing found to cause a problem so far is if the absolutely-positioned element has a margin (which this function does not support at present).
Haven't tested in a responsive design yet.
Note: Be careful not to call this function when the page first loads. If the browser was scrolled or zoomed and then reloaded, the page may not have been rescrolled or zoomed back to where it was yet, and the resulting position would be incorrect. Setting a timer of 100 msec before calling the function seemed to work (allowing the browser time to rescroll and rezoom the page).
这篇关于如何将移动屏幕上的“获取数据”居中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!