css图片居中垂直居中_使用CSS将图片居中

css图片居中垂直居中

Here's one solution to centering an image both horizontally and vertically, when you know the height of the container. Tested in FF, IE6, IE7

当您知道容器的高度时，这是一种将图像水平和垂直居中的解决方案。 在FF，IE6，IE7中测试

The markup:

标记：

<div class="container">
    <img src="pearbook.png" />
</div>

Styles for normal browsers:

普通浏览器的样式：

.container {
    height: 200px;
    width: 300px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid red;
}
.contain img {
    vertical-align: middle;
}

and IE exception:

和IE例外：

<!--[if IE]>
<style type="text/css">
    .container {
        font-size: 181px;
    }
</style>
<![endif]-->

You might wonder where 181px come from? Well, this is the height of the div that contains the image, multiplied by 0.905. Crazy, eh? But it works! And why 0.905? No idea, I saw that in a blog posting which I have hard time locating now in order to give proper credit. A guy was experimenting and he came up with this coeficient.

您可能想知道181px来自哪里？ 好吧，这是包含图像的div的高度乘以0.905。 疯狂吧？ 但这有效！ 为什么是0.905？ 不知道，我在一篇博客文章中看到了这一点，现在为了找到适当的信誉我现在很难定位。 一个人正在试验，他想出了这个系数。

Here's a test page.

这是一个测试页。

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/center-an-image-with-css/

css图片居中垂直居中