我的页面有问题,除非移动窗口大小,否则内容不会居中? http://www.robertfikesiv.com/work3.html
我从http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content复制了代码
jsfiddle 工作正常 https://jsfiddle.net/e4ymr9gd/
HTML
<div class="fullscreen background" style="background-image:url('http://www.robertfikesiv.com/images/work/slider/keys.jpg');" data-img-width="1920" data-img-height="1080">
<div class="content-a">
<div class="content-b">
<h1>KEYS TO SUCCESS</h1>
<h3>Digial Design Intern</h3>
<a href="#"><div id="c">LEARN MORE</div></a>
</div>
</div>
</div>
CSS
.background {
background-repeat:no-repeat;
/* custom background-position */
background-position:50% 50%;
/* ie8- graceful degradation */
background-position:50% 50%\9 !important;
}
/* fullscreen setup */
html, body {
/* give this to all tags from html to .fullscreen */
height:100%;
}
.fullscreen,
.content-a {
width:100%;
min-height:100%;
}
.not-fullscreen,
.not-fullscreen .content-a,
.fullscreen.not-overflow,
.fullscreen.not-overflow .content-a {
height:100%;
overflow:hidden;
}
/* content centering styles */
.content-a {
display:table;
}
.content-b {
display:table-cell;
position:relative;
vertical-align:middle;
text-align:center;
}
jQuery
/* fix vertical when not overflow
call fullscreenFix() if .fullscreen content changes */
function fullscreenFix(){
var h = $('body').height();
// set .fullscreen height
$(".content-b").each(function(i){
if($(this).innerHeight() <= h){
$(this).closest(".fullscreen").addClass("not-overflow");
}
});
}
$(window).resize(fullscreenFix);
fullscreenFix();
/* resize background images */
function backgroundResize(){
var windowH = $(window).height();
$(".background").each(function(i){
var path = $(this);
// variables
var contW = path.width();
var contH = path.height();
var imgW = path.attr("data-img-width");
var imgH = path.attr("data-img-height");
var ratio = imgW / imgH;
// overflowing difference
var diff = parseFloat(path.attr("data-diff"));
diff = diff ? diff : 0;
// remaining height to have fullscreen image only on parallax
var remainingH = 0;
if(path.hasClass("parallax")){
var maxH = contH > windowH ? contH : windowH;
remainingH = windowH - contH;
}
// set img values depending on cont
imgH = contH + remainingH + diff;
imgW = imgH * ratio;
// fix when too large
if(contW > imgW){
imgW = contW;
imgH = imgW / ratio;
}
//
path.data("resized-imgW", imgW);
path.data("resized-imgH", imgH);
path.css("background-size", imgW + "px " + imgH + "px");
});
}
$(window).resize(backgroundResize);
$(window).focus(backgroundResize);
backgroundResize();
有没有办法修复这个错误?
最佳答案
仅供引用,除非您需要支持旧版本的 IE,否则这一切现在都内置在 CSS 中。您不需要任何 JavaScript。
居中背景并填充一个元素(browser support):
background-position: 50% 50%;
background-size: cover;
将单个子元素垂直和水平居中(browser support):
display: flex;
justify-content: center;
align-items: center;
至少,如果您检测到浏览器不支持 CSS,最好只回退到 JS 解决方案。 (对于它的值(value),默认情况下我会阻止脚本,所以你的最小示例只是一个空白的白页 - 因为它是在 JS 启动之前白色背景上的白色文本。如果我不知道更好的话我会离开并且再也没有看过它。)
jsbin: http://jsbin.com/jubuvizadi/1/edit?html,css,js,output
关于jquery - 除非手动更改浏览器窗口大小,否则内容为何不垂直居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29617893/