0

我正在使用以下 jquery 代码在页面上居中 div，问题是除非我在 css 中为 div 指定高度，否则它不起作用，问题是 div 应该根据里面的内容调整大小. 如果我在 css 中设置 height:auto ，我仍然会遇到问题，但是如果我将 height:300px 例如放在页面上，那么它会将 div 居中。

我在这里有一个问题的 jsfiddle：http: //jsfiddle.net/Vjvyz/

jQuery

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

添加display:table-cell

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

演示

于 2013-03-05T12:03:23.910 回答
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 回答
0

可能有点hacky，但您可以尝试使用边距：

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