0

次のjqueryコードを使用してdivをページの中央に配置しています.cssでdivの高さを指定しない限り機能しないという問題があります.これの問題は、divがその中のコンテンツによってサイズ変更されることになっていることです. css で height:auto を設定しても問題は発生しますが、たとえば height:300px を設定すると、div がページの中央に配置されます。

ここに問題の jsfiddle があります: http://jsfiddle.net/Vjvyz/

Jクエリ

var positionContent = function () {
    var width = $(window).width(); // the window width
    var height = $(window).height(); // the window height
    var containerwidth = $('.container').outerWidth(); // the container div width
    var containerheight = $('.container').outerHeight(); // the container div height
    if ((width >= containerwidth) && (height>=containerheight)){
        $('.container').css({position:'absolute',
            left: ($(window).width() - $('.container').outerWidth())/2,
            top: ($(window).height() - $('.container').outerHeight())/2 }); 
    } 
};
//Call this when the window first loads
$(document).ready(positionContent);
//Call this whenever the window resizes.
$(window).bind('resize', positionContent);

HTML

<div class="container"></div>
<div class="container">
    <div class="logo"></div>
    <div class="menucontainer"></div>
    <div class="content">
        <p>Passion stands for the enthusiasm and fervour we put into everything we do in the company, and in developing the right organisational mix to help others in every possible way<br />
        we want every guest to experience that passion for life by having the most relaxing, blissful and luxurious stay possible, a time filled with personal discovery, recovery and spiritual fulfillment.</p>
        <p>We want every employee to taste that passion for life by growing in confidence and skills, and feeling part of a close-knit global family.</p>
    </div>
</div>

CSS

.container {width:300px; background:#eee; height:300px;}
4

4 に答える 4

2

ブラウザ全体で機能するこのコードを使用してください。

(function($)
{
    $.fn.center = function()
    {
        var element = this;
        $(element).load(function()
        {
            changeCss();
            $(window).bind("resize", function()
            {
                changeCss();
            });
            function changeCss()
            {
                var imageHeight = $(element).height();
                var imageWidth = $(element).width();
                var windowWidth = $(window).width();
                var windowHeight = $(window).height();
                $(element).css({
                    "position" : "absolute",
                    "left" : windowWidth / 2 - imageWidth / 2,
                    "top" : windowHeight /2 - imageHeight / 2
                });
            };
        });
    };
})(jQuery);

そしてそれを次のように使用します$('.container').center();

于 2013-03-05T12:09:02.567 に答える
1

コンテナの高さと幅が静的な場合は、CSSでのみ実行できます。以下のコードを使用するよりも：

.container{
  width:300px; 
  background:#eee;
  height:300px;
  position:absolutel
  left:50%;
  top:50%;
  margin-left:-150px; /* 50% of your width with the - */
  margin-top:-150px; /* 50% of your height with the - */
}

あなたのコードには

<div class="container"></div><div class='container'>

これを次のように変更します。

<div class='container'>

問題を修正します。

于 2013-03-05T12:10:32.953 に答える
1

追加display:table-cell

.container {width:300px; background:#eee; display:table-cell}

デモ

于 2013-03-05T12:03:23.910 に答える
0

少しハックかもしれませんが、マージンを使って試してみることができます:

.container {margin-top:-25%;width:300px; background:#eee; height:inherit;position:relative;}
于 2013-03-05T12:48:17.697 に答える