未知大小的图像如何在已知大小的 div 中居中？答案

【问题标题】：How can an image of unknown size be centered within a div of known size?未知大小的图像如何在已知大小的 div 中居中？
【发布时间】：2010-12-09 02:21:27
【问题描述】：

我试图在已知大小的 div 中将未知大小的图像居中，以便图像在 div 中垂直和水平居中，并且图像的纵横比不会失真。

这是example

这段代码几乎可以完成这项工作，但两个图像看起来都略微向下移动了......可能有几个像素。为什么？

HTML；

<body>
  <div class="container" id="c1">
    <img src="test.jpg"/>
  </div>
  <div class="container" id="c2">
    <img src="test.jpg"/>
  </div>
</body>

CSS；

.container {
 text-align: center;   /* Center the image horizontally */
 margin: 1em;  /* Just for looks */
 background: red; /* Just for looks */
}

.container img {
 vertical-align: middle;    /* See note below */
 max-height: 100%;   /* Limit the image size to fit the container */
 max-width: 100%;   /* Limit the image size to fit the container */
}

#c1 {
 width: 8em;
 height: 4em;   /* See note below */
 line-height: 4em;  /* See note below */
}

#c2 {
 width: 5em;
 height: 7em;   /* See note below */
 line-height: 7em;  /* See note below */
}

注意：通过使容器的 line-height 与容器的高度相同，并将 {vertical-align: middle;} 应用于图像，图像在容器内垂直居中。这应该使容器内的图像垂直居中，并且几乎可以正常工作，只是图像总是太低两个像素。

我试过做 * {margin:0; padding:0} 和几个 reset.css 文件，但图像似乎仍然向下移动了一点。

所以我的问题实际上是两个问题；

未知大小的图像如何在已知大小的 div 中居中？
为什么img和div的边缘之间有一个小间隙？

问候，CSS 新手。

【问题讨论】：

是我还是 HTML 不全？
@ClarkeyBoy 修复了这个问题，没有正确缩进。

标签： html css image

【解决方案1】：

我能想到的最简单的方法是使用 jQuery：

$(document).ready(
    function(){
        $('img').each(
            function(){
                var imgHeight = $(this).height()/2;
                var imgWidth = $(this).width()/2;
                var div = $(this).parent();
                var divHeight = div.height()/2;
                var divWidth = div.width()/2;
                $(this).css(
                    {
                        'top':divHeight - imgHeight,
                        'left':divWidth - imgWidth
                    });
            });
    });

但是，我不相信这是最精简的方式。不过，从好的方面来说，它可以工作：JS Fiddle Demo。

【讨论】：

+1 水平居中可以通过CSS实现，但是这个高度的方法是明智的。
@Orbling: 水平居中可以（通常）在 css 中处理，但由于我在 img 元素上使用了 position: absolute;，因此我认为该元素已被移除文档的流程，因此无法使用 margin: 0 auto; 居中（或者，实际上，text-align: center 在父 div 元素上）。
为了更通用，您可以使用$(this).closest(".container") 而不是$(this).parent()。这样您就可以将图像包含在容器内的另一个元素中。

【解决方案2】：

如果您不介意浏览器的一些不一致，您可以使用 CSS3 和灵活的盒子模型来做到这一点：

HTML

<div id="container">
    <div id="one">One</div>
</div>

CSS

#container {
    background: rgb(230,230,230);
    display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center;
    display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center;
    height: 500px;
    width: 500px;
}
#container #one {
    background: rgb(200,200,200);
    padding: 15px;
}

示例：http://jsfiddle.net/brandondurham/q7feV/

【讨论】：

您好，“浏览器不一致”是什么意思？我正在寻找适用于 IE6 及更高版本的东西。
浏览器不一致...让我想想...呃... IE = naff，任何其他知名浏览器 = 出色。基本上，其他浏览器在元素的宽度/高度中不包括填充、边距和边框，而 IE 包括填充、边距和边框，或者可能相反。我不记得是哪条路了——自从我不得不为 IE 编写代码以来已经很久了。
另一件事 - @Brandon：Spot 要求容器的宽度和高度也可以灵活调整。我认为这可以通过删除#container 的宽度/高度设置来实现，但我不确定。我知道#one 会出现在框的中间（水平方向）。
很遗憾，我无法使用 CSS3，因为目前大约 64% 的访问者使用 IE6、IE7 或 IE8。

【解决方案3】：

您应该知道图像的宽度以将其放置在中心位置，使用 div 的 margin: auto CSS 属性。如果宽度未知，我猜 javascript 是解决您问题的唯一方法

【讨论】：

jQuery 会更好——我已经很容易地做到了这样的事情，但我在图像下方有几行文本（产品代码、名称、描述等）。我目前没有打开代码，但下次我打开（可能是今晚晚些时候）我会发布我的解决方案。 PS 我知道这听起来像是我在说 jQuery 与 JS 完全不同——但我知道它是基于 JS 的...... :)
容器内图像的水平居中工作正常。由 .container { text-align: center;} 完成
我猜你是对的，因为 img 是一个内联元素...（我已经检查过了 :)）

【解决方案4】：

使用“边距：自动；”在图像上使其在 div 中水平居中。

垂直居中“垂直对齐”不起作用。如果容器是定位元素，您可以使用 "top:50%" "margin-top: - (图像的一半高度)" 但由于您不知道高度，您需要使用 javascript 计算它。

【讨论】：

水平居中由 .container {text-align: center;} 完成，效果很好。垂直居中是由于图像是内联元素，因此结合了 .container img {vertical-align: middle;} 并使容器的行高与容器的高度相同，即. #c1 {高度：4em; line-height: 4em;} 几乎可以工作。唯一的小问题是 img 看起来总是向下移动了几个像素。
如果您能提供一个您使用过的示例页面，我将不胜感激。在我看来，除了您必须指定高度之外，您似乎具有您正在寻找的效果，但您不知道顶部额外的几个像素来自哪里。这可能来自几件事——容器填充、容器边距和图像边距（如果可能的话，可能还有图像填充——但我不认为是这样）。此外，如果图像或容器的边框与其前面的元素颜色相同，则看起来没有边框。尝试设置边框：0。

【解决方案5】：

在图像的 onload 事件中，您应该获取它的宽度和高度，然后调整图像的大小保持纵横比，然后使用 JavaScript 将图像居中。

请检查以下我之前为测试目的所做的示例。

Proportional image resize on image load and displays a loading gif until image load

【讨论】：

这正是我正在寻找的效果。如果我不得不求助于脚本，我会这样做，但我更喜欢纯 CSS 的解决方案。但是感谢脚本和很好的例子。
纯 CSS 无法做到这一点。您需要知道图像的宽度和高度。也许您可以为此使用 CSS 表达式，但不建议这样做。在任何地方，我都会阅读“避免使用 CSS 表达式”以提高性能。如果您的网站的访客数量有限，您可以使用它。如果你有兴趣我可以帮助你。在这里发表评论..