Question

我有一组可变的图像我正在flexbox中显示，我正在尝试确保图像垂直和水平对齐到它们的父div。我尝试过通常的vertical-align，text-align，max-width：100％;和margin：0 auto;。任何良好的跨浏览器解决方案，我的困境，不会导致扭曲/左对齐图像？

这是CSS（在它当前的borky形式中，我也尝试了其他上述的中心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/

Answer 1

如果您将margin: auto;添加到.collage img，则会解决问题。

但并非所有浏览器都支持flexbox。

如果您希望它完全跨浏览器，您可以在图像前放置一个跨度并将其放入其中：

CSS

 .collage div{
   text-align: center;
 }

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

HTML

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

CSS flexbox图像居中

1 个答案: