Question

我试图将div放在中心位置，问题是div的内容是动态生成的，可能会更长或更短。

这里是一个li的样本（至少有一个这样，大约1000个）

<li class="row">
<div class="channel_date">
    <p class="channel">
        Returns | 
    </p>

    <p class="date">
        Mar 11, 2014
    </p>                

</div>  
</li>

所以我需要在页面加载后获得每个div的宽度并将div设置为该宽度，因此margin auto会将其居中。最好，如果它可以用jquery完成谢谢你的答案将不胜感激!!!

Answer 1

此插件用于窗口中心，您可以将其更改为您自己的

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

使用方法：

$(element).center();

Answer 2

您可能最好使用jQuery的文档就绪函数并设置div的宽度 - 请参阅：http://api.jquery.com/width/

Answer 3

遍历每个匹配的div并获取当前宽度。然后将相同的宽度应用于元素。

$(document).ready(function() {
    $('.channel_date').each(function() {
        var curWidth = $(this).width(); // determine the width
        $(this).width(curWidth); // set the width
    });
});

然后在CSS中：

.channel_date {
    margin: 0 auto;
}

使用jquery获取并设置每个div的宽度

3 个答案: