CODEWITHSUNDEEP
htmlcss
fildred13
fildred13

Reputation: 2350

How do I vertically center an image whose size can change in a div?

How do I vertically center an image with css when I don't know what height of the image will be? The image, and thus the height, will be provided by the server at run-time, and it could be any number of heights. Knowing this, I created a div within a div, more or less following method 1 of the tutorial found here: http://phrogz.net/css/vertical-align/. But that only works when you know the height of the content you are trying to center, I believe. So how on earth do I vertically center this:

<div class="galleryItem">
    <a href="wherever">
    <img src="whatever" width="173" height="155">
       <div class="galleryTitle">
           <div class="galleryImg">
               <img src="centerMeVertically.jpg">
           </div>
       </div>
    </a>
</div>

Here is the CSS which is failing: 

   .galleryItem {
    float: left;
    border-style: solid;
    border-width: 1px;
    border-color: #b78e18;
    margin: 7px 4px;
    padding: 5px;
    width: 173px;
    height: 190px;
    position: relative;
}

.galleryTitle {
    height: 33px;
    width: 173px;
    position: relative;
}

.galleryImg {
     width: 173px;
     height: 30px;
     position: absolute;
     top: 50%;
     margin-top: -15px;
 }

.galleryImg > img {
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

Upvotes: 4

Views: 495

Answers (6)

daamsie
daamsie

Reputation: 1598

I would calculate first what is the difference in height between the container and image, then divide that in two and make that the margin-top

requiredMargin=(containerheight-imageheight)/2

You could do this through JS or server side would be even better to handle situations where people have JS turned off for whatever reason.

.galleryImg img {margin-top:<requiredMargin>px;}

That is a reliable method of doing it.

OR, the CSS3 way

If you want to only use CSS and are comfortable only supporting the latest browsers, then you can consider using Flexbox:

<div class="imageContainer">
    <img src="http://placehold.it/350x100">
</div>

<style>
.imageContainer {
   height:300px;
   display: -webkit-box;
    -webkit-box-align: center;
   display: -moz-box;
   -moz-box-align: center;
   display: -ms-flexbox;
   -ms-box-align: center; 
   display: box;
   box-align: center; 
}
</style>

http://jsfiddle.net/gp5Ry/1/

To support older browsers as well, you might consider using Flexie. Though I haven't used this myself, it seems like a good option.

Upvotes: 0

Pratswinz
Pratswinz

Reputation: 1476

Here is the live example ,how you can center image to any div There is some extra css for beautifying but u can ignore it

http://jsfiddle.net/pratswinz/vCBnD/

<div class="span2 cen_eventspan2">
            <figure class="span12 cen_event">
                <img class="img-polaroid-user" src="https://www.dropbox.com/s/j4x8plvaupv0ftp/AC_Feedback-box-buttons_unlcear_b.png" />
            </figure>
        </div>

/-----------------css--------------------/

.cen_event {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 172px;
    line-height: 159px;
    padding: 4px;
    text-align: center;
    width: 182px;
}
.cen_event .img-polaroid-user {
    max-height: 160px;
    max-width: 172px;
    vertical-align: middle;
    border:1px solid #f00;

}

Upvotes: 1

Pramod Bhoi
Pramod Bhoi

Reputation: 197

//JQuery

$(function(){
    // vertical align images
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();        
            var mh = Math.ceil((ph-ah) / 2); //var mh = (ph - ah) / 2;
            $(this).css('margin-top', mh);
            //console.log(mh);
        });
    };
    $('.galleryItem img').vAlign();
});

Upvotes: 1

staircasebug
staircasebug

Reputation: 144

Use table display properties on your divs. It's not pretty, but it works.

http://jsfiddle.net/staircasebug/dv9RS/

.galleryTitle {
display: table;
width: 100%;
height: 300px;
background: #eee;
}

.galleryImg {
display: table-cell;
vertical-align: middle;
}

img {
margin: 0 auto;
display: block;
}

Upvotes: 0

Prasanth K C
Prasanth K C

Reputation: 7332

A table-cell has the ability to align its content to vertically center. So we need to change the behavior of div to table-cell by changing its 'display' property to 'table cell'.

Now please check with the below code, see the image in corresponding div gets vertically aligned to center.

.galleryImg {
   display: table-cell;
   height: 60px;
   vertical-align: middle;
   width: 173px;
}

Hope it will help you.

Upvotes: 3

Sweety
Sweety

Reputation: 159

Add following to the css;

vertical-align:central; or vertical-align:middle;

Upvotes: -3

Related Questions