将图像垂直和水平居中在div中心 [英] center an image in div vertically and horizontally

问题描述

我发现我的关于水平和垂直居中的图像。但它不工作。
我的代码是

I found my tuts about centering image horizontally and vertically . But it is not working . my code are

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

图片的高度和宽度是动态的。

The height and width of image is dynamic.

推荐答案

这样写：

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
    text-align:center;
    line-height:400px;
}


#parent img {
    vertical-align:middle;
}

检查此 http://tinkerbin.com/XYKUzvXu

UPDATED

选中此 http://tinkerbin.com/GL4GaNfo

这篇关于将图像垂直和水平居中在div中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！