IE7垂直&水平图像居中 [英] IE7 Vertical & Horizontal Image Centering

问题描述

我试图在一个固定的高度和宽度内将图像垂直和水平对齐。代码我在FF，Chrome，Safari和IE8 +，但不是IE7的工作正常，我不能为我的生活找到一个工作。

可以有不同的高度和宽度，虽然如果我找不到一个好的解决方案，我想我可以更严格的高度，并回退尝试和测试中心技巧。

现场示例在 jsfiddle

任何人因为< img> 元素是

code> display：inline; 默认情况下，我们可以像我们的文本一样将它们居中：

  a {
 height：180px; 
 width：150px; 
 display：block; 
 text-align：center; 
 border：1px solid black; 
 margin：10px; 
 line-height：180px; 
} 
 a img {
 vertical-align：middle; 
} 
  

jsFiddle演示

I'm attempting to centre align an image both vertically and horizontally within a fixed height and width . The code I have works fine in FF, Chrome, Safari and IE8+ but not IE7 and I cannot for the life of me find a work around.

At the moment the images can be of varied heights and widths, although if I cannot find a good fix I guess I can be more strict of the height and fall back on tried and tested centering techniques.

Live example is at jsfiddle

Anyone any bright ideas?

解决方案

Because <img> elements are display: inline; by default we can center them just like we would text:

a {
    height: 180px;
    width: 150px;
    display: block;
    text-align: center;
    border: 1px solid black;
    margin: 10px;
    line-height: 180px;
}
a img {
    vertical-align: middle;
}

jsFiddle Demo

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