0

I would like to vertical align a image in the center of a div.

For this I use this code:

<div id="cboxLoadedContent" style="width: 1024px; overflow: auto; height: 738px; vertical-align: middle;">
    <img class="cboxPhoto" src="" style="cursor: pointer; float: none; width: 50%; vertical-align: middle;"></img>
</div>

JSFiddle: http://jsfiddle.net/3uk642wg/

How can I achieve that?

JGeer
  • 1,768
  • 1
  • 31
  • 75
  • 2
    possible duplicate of [Center image using text-align center?](http://stackoverflow.com/questions/7055393/center-image-using-text-align-center) – Shanaka Jun 15 '15 at 12:42

2 Answers2

2
div#cboxLoadedContent {
   .... 
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

jsfiddle - http://jsfiddle.net/3uk642wg/1/

div#cboxLoadedContent {border: 1px solid #333; display: inline-block;text-align: center; display: table-cell;vertical-align: middle;}
.cboxPhoto {vertical-align: middle;}
<div id="cboxLoadedContent" style="width: 1024px; overflow: auto; height: 738px; vertical-align: middle;">
<img class="cboxPhoto" src="https://www.google.com//images/srpr/logo11w.png" style="cursor: pointer; float: none; width: 50%; vertical-align: middle;"></img>
</div>
Felix A J
  • 6,300
  • 2
  • 27
  • 46
0

If you are running this on modern browsers you can try this.

div#cboxLoadedContent {
border: 1px solid #333; 
display: inline-block; 
text-align: center;
}
.cboxPhoto {
position: relative;
top: 50%;
transform: translateY(-50%);
}
rssfrncs
  • 991
  • 4
  • 19