0

我想做一些非常简单的事情。当我单击一个 div 时，我想显示一些以任何分辨率为中心的文本。

这是我的方法：

<button>Click</button>
<div id="fade"><a class="close" href="#">&#215;</a>
     <p>Lorem ipsum sit dolor amet</p>

 </div>

这个CSS：

#fade {background:red; width:100%; height:150px;}
.close {
color:white;
font:bold 40px Arial,Sans-Serif;
text-decoration:none;    
   }

这是一个jsfiddle ​</p>

现在我想做的是将#fade div 集中在每个屏幕分辨率上。

我怎样才能做到这一点？

4

4 回答 4

3

div始终垂直和水平居中

首先，您需要为div. 100%不会做。
接下来，将其设置position为absolute;

#fade {background:red; width:450px; height:150px; position:absolute;}

然后是更新的 jQuery：

jQuery.fn.center = function() {
    _TOP = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop();
    _TOP = (_TOP <= 0) ? 0 : _TOP;
    _LEFT= (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft();
    _LEFT = (_LEFT <= 0) ? 0 : _LEFT;
    this.css({
        top:_TOP + "px",
        left:_LEFT + "px"
    });
    return this;
}


$("#fade").center();
$(window).on('resize', function() {
    $("#fade").center();
});

$("#fade").hide();
$("button").click(function() {
    
    $("#fade").fadeToggle("slow", "linear").find(".close").on("click", function() {
        $(this).parents("#fade").fadeOut("slow");
        return false;
    });
    
    $("#fade").center();
});​

演示

于 2012-08-13T17:10:45.013 回答
1

设置包含文本的 p 标签的 text-align 属性。

<p style="text-align:center">Lorem ipsum sit dolor amet</p>

现场演示

于 2012-08-13T17:13:41.700 回答
1

对于垂直对齐设置：

#fade {
    background:red; 
    width:100%; 
    height:150px;
    position: absolute;
    top: 50%;
    margin-top: -75px;
}

现场演示

于 2012-08-13T17:26:25.330 回答
0

这是我的解决方案，它添加了填充以使 div 的内容居中，并#fade在通过 jQuery onclick 时将 div 放置在屏幕中间：

CSS：

#fade { background:red; width:90%; padding:50px 0; text-align:center; position:absolute; }
#fade p { display:inline-block; position:relative; top:-10px;  }

Javascript：

$("#fade").hide();
$("button").click(function() {
    var wh = $(window).height();
    var ww = $(window).width();
    var fh = $('#fade').outerHeight();
    var fw = $('#fade').outerWidth();
    $('#fade').css('top', Math.floor((wh-fh)/2)+'px');
    $('#fade').css('left', Math.floor((ww-fw)/2)+'px');
    $("#fade").fadeToggle("slow", "linear").find(".close").on("click", function() {
        $(this).parents("#fade").fadeOut("slow");
        return false;
    });
});

如果您不想使用 jQuery，请改用 css，例如，#fade { margin:50px auto; }但它不会垂直居中。

小提琴就在这里。

于 2012-08-13T18:37:53.940 回答