【问题标题】:The old center a image in a div issue ( image size variable - div size fixed )旧居中的 div 问题中的图像(图像大小可变 - div 大小固定)
【发布时间】:2012-02-11 01:18:23
【问题描述】:

我看到了很多针对此的修复..

但我们的问题是图像在容器 div 中的绝对定位。

我们的图像可以是任意大小(在合理范围内 - php 可以根据需要调整大小但按比例缩放),因此我们的图像集具有最大宽度和高度。

示例:html

<a id="product_image_preview"  href="item.php"><img id="image" class="preloader" src="images/products/oakbookcase.jpg" title="Product Title" alt="Product Title" /></a>

我们处理这个的 css 是:

示例 css:

#product_image_preview { width:260px;height:140px;border:1px solid     #aaaaaa;position:relative;line-height:140px;}
#product_image_preview #image {margin:0px auto;vertical-align:middle;max-width:260px;max-height:140px;}

一切都很好,问题是容器 div #product_image_preview 中的图像水平居中而不是垂直居中。

知道我在哪里搞砸了。

我们的容器 div 总是 260px x 140px

【问题讨论】:

标签: css


【解决方案1】:

http://jsfiddle.net/dcGZm/13/

该代码应该可以解决您的问题。我对此链接稍作修改:http://www.brunildo.org/test/img_center.html,使用 :after 伪元素而不是空跨度。

应该在 IE8 及以上版本中工作。

a {
    background: #000;
    vertical-align: middle; 
    display: table-cell;
    height: 260px;
    width: 140px;
    text-align: center
}

a:after {
    content: ' ';
    height: 100%;
    display: inline-block;
    width: 1px;
    vertical-align: middle
}

a img {
    max-height: 200px;
    max-width: 100px;
    vertical-align: middle
} 

【讨论】:

  • jsfiddle.net/dcGZm/6 ... 我设置了 max-width + max-height 并且现在似乎工作正常
  • 啊,这似乎更好,让我玩一下我们的 css,然后回来设置答案。干得好伙计:)
  • 你不为我们工作,也许我们在某个地方发生了 css 冲突。谢谢,尽管队友感谢您的时间和努力
猜你喜欢
  • 1970-01-01
  • 2015-10-12
  • 2011-01-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-04-29
  • 1970-01-01
相关资源
最近更新 更多