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

Vertical align の場合は、次のように設定します。

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

ライブデモ

于 2012-08-13T17:26:25.330 に答える
1

テキストを含む p タグの text-align プロパティを設定します。

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

ライブデモ

于 2012-08-13T17:13:41.700 に答える
0

これが私の解決策です。divのコンテンツを中央に配置するためのパディングを追加し、#fadejQuery経由でオンクリックすると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 に答える