居中动态大小的图像答案

【问题标题】：Centering dynamically-sized images居中动态大小的图像
【发布时间】：2012-07-20 18:45:49
【问题描述】：

我正在使用 PHP 脚本自动按比例调整图片大小，使其适合给定的高度和宽度（例如：原始图片为 200x100 像素，目标框为 180x180 像素，调整后的图片为 180x90 像素）。

它可以正常工作，但用于在 div 中居中图像的常用 CSS 技巧似乎需要您提前知道尺寸。

我发现的唯一解决方法是将外部 div 定义为 display:table;，将包含图像的 div 定义为 display: table-cell;vertical-align: middle;text-align:center;。

还有其他方法吗？

【问题讨论】：

你不能在你的 php 脚本中加入透明色来获得 180x180px 的图像吗？
我认为保证垂直居中的唯一其他方法是使用 JavaScript - 你的情况可以接受吗？
如果你想使用你提到的方法而不是表格单元技巧，你可以使用 Javascript 来获取图像的尺寸和设置它的样式，或者返回到PHP 脚本中的浏览器自定义样式规则。
包含的div中除了图片还有其他元素吗？
@BaliBalo 这是聪明的想法。是的，使用 PNG 没有任何障碍，因为图像会很小。

标签： css html image centering

【解决方案1】：

不是最佳实践 text-align 来对齐图像。

“关于 text-align 属性的棘手之处在于你只能用它来对齐文本——你不能用它来移动像图像这样的块级元素。一些浏览器会用这个属性来对齐图像或表格，但是正如你所发现的，它不可靠。” --Jennifer Kyrnin, About.com

您可以使用已弃用的 img 属性 align="center"，尽管您不会使用。这样标签和样式混合在一起，更糟糕的是，整个图像周围有垂直和水平空间。
```
<img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way
```
解决此问题的最佳方法是使用 css。将图像设置为 div 的背景，然后 div 的空间将成为图像的空间，您可以使用边距将其放置到位。您可以尝试使用其中一种其他技术CSS Tricks's Absolute center an image

CSS 背景图像技术：

background:url('path_to_img') center center no-repeat; /* div center */
background:url('path_to_img') center 0      no-repeat; /* div horizontal center */
background:url('path_to_img') 0      center no-repeat; /* div vertical center */

【讨论】：

【解决方案2】：

如果你需要使用img标签，又不想把div和背景图搞混，可以试试这个方法：

http://jsfiddle.net/Nz6Nm/3/

.container
{
    width: 180px;
    height: 180px;
    background-color: #FF0000;
    line-height: 180px;
    font-size: 0;
    text-align: center;
}
.container img {
    vertical-align: middle;
}

font-size 设置为 0 以避免奇怪的间距。让 line-height 等于容器的高度，会导致 vertical-align 用作垂直中心，至少对于图像来说是这样。

这样做的好处是您可以将图像放在 img 标签中，这在语义上比背景图像更令人愉悦。当您有一个已知的容器大小，但您希望在其中居中的图像大小未知时，此方法有效。

编辑：这是另一个小提琴的链接：http://jsfiddle.net/Nz6Nm/4/

您提到可能需要在图像上方放置文本，所以我只是想展示一种快速的方法。这种方式在顶部增加了 20px。如果您需要坚持使用 180 x 180，那么您可以调整逻辑以适应。

【讨论】：