CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chris
Chris

Reputation: 59491

Center a dynamic <div> on screen

I'm trying to create a gallery-page as a list of thumbnails. When a thumbnail is clicked, the related picture opens in a "popup"-div showing the full size of the image.

What I'm having problems with is centering that div on the screen. Each picture has different dimensions.

How to do this with javascript / jQuery?

JSFiddle: http://jsfiddle.net/29bo2k9q/

HTML:

<div id="pic1" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-
xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302"/></div>
<div id="pic2" class="white_content"><img src="https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335"/></div>
<div id="fade" class="black_overlay"></div>
<div id="wrapper">
    <section id="gallery">
        <ul>
            <li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/1378748_520568708029338_926300946_n.jpg?oh=d092e1f660360c84033f6144010052f9&oe=54F4B302');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
            </li>
            <li style="background-image: url('https://scontent-a-fra.xx.fbcdn.net/hphotos-xaf1/v/l/t1.0-9/539421_418922361527307_1534426043_n.jpg?oh=006a46697258683be3423d378cf40feb&oe=54ABD335');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic2').style.display='inline-block';document.getElementById('fade').style.display='block'"></a>
            </li>
        </ul>
    </section>
</div>

CSS:

    #gallery {
    text-align: center;
    width: 100%;
}

#gallery ul{
    display: block;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

#gallery ul li {
    display: inline-block;
    vertical-align: top;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 250px;
    height: 250px;
    margin: 2.5%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px; /* future proofing */
    -khtml-border-radius: 5px; /* for old Konqueror browsers */
    cursor: pointer;

.black_overlay{
    cursor: pointer;
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
}

.gallerylink{
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

Upvotes: 3

Views: 133

Answers (1)

Anonymous
Anonymous

Reputation: 10216

You could achieve this by adding transform: translate(-50%, -50%);, left: 50%; and top: 50%; to .white_content like this:

JSFiddle - DEMO

.white_content {
    position: absolute;
    display: none;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

You should also add vertical-align: middle; to your images to remove the below space - DEMO

Upvotes: 5

Related Questions