Center div with jQuery

Question

I'm trying to center a set of divs (1 class) at the center of the screen. My problem is that each div has different dimensions. I've followed some guidelines I found to center the divs with jQuery:

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

but this doesn't seem to work for me: https://i.stack.imgur.com/xSJJT.png What am I doing wrong?

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;
}

You should be able to do this with CSS. But you need to give a complete example to get a complete answer. — ralph.m, Jun 17 '14 at 14:15
Do you want somethink like this ? http://stackoverflow.com/questions/24246220/keep-image-centered/24246496#24246496 — Joffrey Maheo, Jun 17 '14 at 14:23

score 0 · Answer 1 · answered Jun 17 '14 at 14:20

0

Try something like this

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

answered Jun 17 '14 at 14:20

j_buckley

1,926
1
12
13

score 0 · Answer 2 · answered Jun 17 '14 at 14:24

0

If you need only horizontal center, than use margin: 0 auto;

Else, use jQuery to calculate it:

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

JSFiddle

answered Jun 17 '14 at 14:24

Justinas

41,402
5
66
96

docodemore · Answer 3 · 2014-06-17T14:36:06.870

0

margin: 0 auto works when an item is display:block; and it's parent is larger & position:relative

Problems I see right off the bat:

You have some margin: 0 auto with display:inline-block which wont work.
The javascript in onclick event seems messy, use .addClass instead
You are using position:absolute

Centered

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

Not Centered:

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

Also, Why don't you use .addClass with jQuery to apply new style rules? It might work better.

If you want a centered modal window:

<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; }

If you wanted 3 images across all centered:

Have a large <div> width 100%
Child <div> that is margin:0 auto, width: auto.
Children image <div>s that are display:inline block, width: auto.

edited Jun 17 '14 at 14:36

answered Jun 17 '14 at 14:27

docodemore

1,074
9
19

Thanks. Your reply confuses me a bit though. You say what I should edit, but I'm not sure where. Also, the reason I use `position:absolute` is because I want each picture to be centered on the screen, regardless of where the "thumbnail" is located. Essentially all div's are centered but hidden, then when you click on a thumbnail, its relevant div with the full-size pic appears centered on screen. Thanks. – Chris Jun 17 '14 at 15:20
If you want each picture to be centered on the screen, is it one single picture or a group of pictures? Position absolute will not center anything! IF you use position absolute make sure the centered div is relative to the absolute div. The absolute div could take up the entire screen so the relative one is centered int he absolute. – docodemore Jun 17 '14 at 15:26
To center a div both vertical and horizontal with jquery: http://stackoverflow.com/questions/13903556/centering-a-div-vertically-horizontally-using-jquery – docodemore Jun 17 '14 at 15:36

Center div with jQuery

3 Answers3