Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Vertically Center CSS Elements with jQuery

You can see a live example of what I'm working on here: http://test.lt11.com/clients/

Each thumbnail has a logo/image in the center of it. Or at least, horizontally center. Some of logos are vertically centering just fine (the smaller ones) but because all the logos are of varying height I don't seem to be able to use purely CSS to pull this off.

Here is the HTML/PHP I'm using on my pages:

<?php 

        $color = get_post_meta($post->ID, '_cmb_thumb_overlay_color', true);
        $rgba = hex2rgba($color, 0.6);

        if ( has_post_thumbnail() ) {
                echo '<a class="col-md-4 isotope-item" href="';?> <?php the_permalink() ?><?php echo '">';
                echo '<div class="clients-page-item-wrap">';
                echo '<div class="clients-page-item-overlay"'; ?> <?php if ( $rgba != "" ) { echo 'style="background-color:' .$rgba; }  ?><?php echo '">';
                $overlay_img = get_post_meta($post->ID, "_cmb_overlay_img", true);
                if($overlay_img != '') {
                    echo '<div class="clients-page-thumb-wrap">';
                    echo '<img class="clients-page-thumb-overlay" src="' . $overlay_img . '">';
                    echo '</div>';
                    }
                echo '</div>'; //end .overlay
                echo '</div>'; //end .wrapper ?>
                <div class="thumbnail-wrapper">
                    <div class="thumbnail-image">
                        <?php the_post_thumbnail();
                        if($overlay_img != '') {
                            echo '<div class="clients-page-thumb-wrap">';
                            echo '<img class="clients-page-thumb-overlay" src="' . $overlay_img . '">';
                            echo '</div>';
                            } ?>
                    </div><!--.thumbnail-image-->
                </div><!--.thumbnail-wrapper-->
                <?php echo '</a>'; //end a.item
                }
                else {
                echo '';
                }
            ?>  

And here is the relevant (I think) CSS:

.clients-page-thumb-wrap {
position: absolute;
width: 20%;
height: 0;
padding-bottom: 20%;
top: 50%;
left: 50%;
margin-left: -10%;
margin-top: -10%;
}

.clients-page-thumb-overlay { position: absolute; width: 100%; height: auto; left: 0; margin-top: -10%; top: 50%; opacity: 1; transition: opacity .5s; -webkit-transition: opacity .5s; } .clients-page-thumb-overlay:hover { opacity: 1; }

This CSS method works for me just fine when I can specify a fixed height for the element I am trying to center, but all these images and logos are of varying height. Specifying a fixed width is fine, just not height. And I would prefer to do it this way rather than make images with alpha that fit the full container. Would make life easier on my end :)

My limited understanding of jQuery is enough to know that it is possible to get the height of an element and then modify the CSS of another element. In theory (If I knew how to write the code) I would get the height of the .clients-page-thumb-overlay element and based on that height, set the CSS height property accordingly and then divide that height in half and apply that value to the margin-top css property of .clients-pafe-thumb-overlay and that should do the trick.

Thanks for the help! And if my ideas on how to tackle this are way off--open to better suggestions!

User Gravatar

bigchokeslam

Posted Jun 19 2014 11:35 UTC

$25


  • Assigned To NBoychev
  • Solved
  • jquery
    php
    html
  • 984 Views

6 Replies


Hi bigchokeslam,

Here is CSS only solution, just put it at the bottom of style.css (it's much better than including JS code for vertical centering):

.clients-page-item-overlay { display: table; text-align: center; }
.clients-page-thumb-wrap { position: static; display: table-cell; margin-top: 0; height: auto; margin-left: 0; width: 100%; vertical-align: middle; padding-bottom: 0; }
.clients-page-thumb-overlay { width: 20%; position: static; margin-top: 0; }

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jun 19 2014 11:48 UTC

Solution

This didn't solve your task? Get your own custom solution.

You can do it with CSS only on modern browsers with the transform:translateY(-50%)

.clients-page-thumb-wrap {
    left: 50%;
    margin-left: -10%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 20%;
}

.clients-page-thumb-overlay {
    height: auto;
    opacity: 1;
    transition: opacity 0.5s ease 0s;
}
User Gravatar

Gaby

Posted Jun 19 2014 11:56 UTC

CSS CODE

.clients-page-item-overlay{position: relative;}
.clients-page-thumb-wrap{position: absolute;}

JS CODE

 $(".clients-page-thumb-wrap").each(function() {
    var $this = $(this);
    var parent = $this.parents(".clients-page-item-overlay").first();

    $this.css({
       top: parent.height()/2 - $this.height()/2 ,
       left: parent.width()/2 - $this.width()/2
    });
});
User Gravatar

rashidul04

Posted Jun 19 2014 12:00 UTC

Just a note - the vertical align with translate is IE9+ compatible, but with table it's IE8+ compatible. This was the reason that I picked the table solution.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jun 19 2014 12:00 UTC

@nikola, indeed. This is why specified "on modern browsers".

Regards.

User Gravatar

Gaby

Posted Jun 19 2014 12:14 UTC

NBoychev, a little late for this maybe but--I noticed after I implemented your solution the logos that are now perfectly centered (thankyou!!) are no longer appear underneath on hover. Previously I had two of the same images/logos pulling fro mthe same variable so when one faded away on hover it seemed as though it never disappeared because there was a second one sitting underneath in the exact same place. You can see what I am talking about in my code above. After I changed the CSS I can't figure out why it's not working that way anymore. Any help is appreciated!

User Gravatar

bigchokeslam

Posted Jun 19 2014 14:19 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions