CSS flexbox image centering

I have a variable set of images I'm displaying in a flexbox, and am trying to make sure the images vertically and horizontally align to their parent div. I've tried the usual vertical-align, text-align, max-width: 100%;, and margin: 0 auto;. Any good cross browser solutions to my dilemma that won't lead to warped/left-aligned images?

Here's the CSS (in it's current borky form, I've also tried the other aforementioned centering CSS):

.collage{
    max-width: 100%;
    max-height: 100%;
    height: inherit;
    display: -webkit-box;     
    display: -moz-box; 
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: inline-flex;   
    flex-direction: column;
}

.collage div{
    display: -webkit-box; 
    display: -moz-box;     
    display: -ms-flexbox;  
    display: -webkit-flex;
    display: inline-flex;  
    overflow: hidden;
    width: 100%;
}

.collage img{
    max-height: 100%;
}

jsfiddle: http://jsfiddle.net/hSb93/3/

---

if you add margin: auto; to .collage img it solves it.

But flexbox is not supported by all browsers.

If you want it to be fully cross-browser you can put a span before the image and put this CSS in it:

CSS

 .collage div{
   text-align: center;
 }

span{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

HTML

<div>
    <span></span>
    <img>
</div>

链接地址: http://www.djcxy.com/p/76034.html

上一篇: 居中flexbox项目

下一篇: CSS flexbox图像居中