使用jQuery的中心div

Question

我试图在屏幕中央对一组div (1类)。我的问题是每个div都有不同的维度。我遵循了一些使用jQuery将div放在中心的指导方针：

$(document).ready(function () {
            $(".content").position({
                "my": "center center",
                "at": "center center",
                "of": "center center"
            });
        });

但这似乎不适合我：http://i.imgur.com/Znyju4z.png，我做错了什么？

HTML:

<div class="galleryarea">
        <div class="galleryframe">
            <div class="galleryentity" style="background-image:url('link_here');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='block';document.getElementById('fade').style.display='block'"></a>
                <div id="pic1" class="content"><img class="galleryfullsize" src="link_here"></div>
            </div>
        </div>

CSS:

.galleryentity{
    display: table;
    margin-bottom: 35px;
    float: left;
    width: 259px;
    height: 250px;
    background-color: #2B3039;
    margin-right: 30px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 3px 5px 2px rgba(50, 50, 50, 0.75);
}
.white_content {
    display: none;
    position: absolute;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
    overflow: auto;
}
.newsframe{
    display: inline-block;
    margin: 0 auto;
    max-width: 1200px;
    margin-top: 35px;
}
.newsentity{
    display: table;
    float: left;
    width: 259px;
    height: 250px;
    background-color: #2B3039;
    margin-right: 30px;
    position: relative;
    -webkit-box-shadow: 0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 3px 5px 2px rgba(50, 50, 50, 0.75);
}
.newsarea{
    width: 100%;
    min-height: 320px;
    background-color: #3F444D;
    text-align: center;
}

Answer 1

试试像这样的东西

$(".content").each(function() {
    $(this).css("position","relative");
    $(this).css("margin-left","auto");
    $(this).css("margin-right","auto");
});

Answer 2

如果您只需要水平中心，则请使用margin: 0 auto;

否则，使用jQuery计算它：

$('.center').css({
   'position: relative',
   'margin': '0 auto',
   'top': parentHeight - selfHeight / 2
});

JSFiddle

Answer 3

当一个项目显示:块时，margin: 0 auto工作；并且它的父项更大& position:relative

我一开始就发现了问题：

• 你有一些空白:0自动显示:内联块，这是行不通的。
• onclick事件中的javascript看起来很混乱，请使用.addClass代替
• 您正在使用position:absolute

居中

<div style="width: 100%">
    <div style="margin: 0 auto; width:300px; display: block;">  <!-- centered-->

不居中：

<div style="width: 100%">
    <div style="margin: 0 auto; width:300px; display: inline-block;">  <!-- broken-->

另外，为什么不使用.addClass和jQuery来应用新的样式规则呢？也许效果会更好。

如果您想要一个居中的模式窗口：

<div class="modalBackground">
    <div class="centered-image">
    </div>
</div>

css：

body.modalBackground { position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9999}
.centered-image { position:relative; margin:0 auto; display:block; }

如果您希望在所有中间都有3幅图像：

• 有一个很大的<div>宽度100%
• 子<div>，即边距:0自动，宽度: auto。
• 显示的子图像<div>s :内联块，宽度: auto。