0

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

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

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

还有其他方法吗？

4

2 回答 2

4

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

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

  • 您可以使用已弃用的 img 属性 align="center"，尽管您不会使用。这样标签和样式混合在一起，更糟糕的是，整个图像周围有垂直和水平空间。

    <img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way

  • 解决这个问题的最好方法是使用 css。将图像设置为 div 的背景，然后 div 的空间将成为您图像的空间，您可以使用边距将其放置到位。您可以尝试使用其中一种其他技术CSS Tricks 的 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 */
于 2012-07-22T01:43:22.130 回答
3

如果你需要使用 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，那么您可以调整逻辑以适应。​</p>

于 2012-07-22T02:01:11.563 回答