居中动态大小的图像

我正在使用PHP脚本按比例自动调整图片大小，以适合给定的高度和宽度（例如：原始图片为200x100px，目标框为180x180px，调整大小的图片为180x90px）。居中动态大小的图像

它工作正常，但通常的CSS技巧用于居中在一个div里面的图像似乎要求你事先知道尺寸。

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

还有别的办法吗？

来源

2012-07-22 James P.

难道你不能把你的PHP脚本透明颜色来获得180x180px图像？ – 2012-07-22 01:39:56

我认为唯一能够保证垂直居中的方法是使用JavaScript - 在您的情况下可以接受吗？ – Hubro 2012-07-22 01:41:02

如果您想使用您提到的方法而不是表格单元技巧，则可以使用Javascript来获取图片的尺寸并设置其样式，或者返回到您的浏览器自定义样式规则PHP脚本。 – 2012-07-22 01:43:15

不是最佳实践文本对齐图像对齐。

“关于text-align属性棘手的事情是，你只能用它对齐文本 - 你不能用它来移动块级元素，如图像有些浏览器将调整图片或表格与此有关。财产，但它不可靠，就像你找到的那样。“ - Jennifer Kyrnin, About.com

您可以使用已弃用的IMG的属性ALIGN = “中心”，虽然你不会用。这种方式使得标签和样式变得混杂，并且恶化，整个图像周围有垂直和水平的空间。
```
<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 */

来源

2012-07-22 01:43:22

如果您需要使用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; 
}

字体大小设置为0以避免奇怪的间距。线高等于您容器的高度，会导致垂直对齐作为垂直中心工作，至少对于图像而言。

这样做的好处是，你将能够把你的图像放在img标签中，这比背景图像更符合语义。此方法适用于已知容器大小的情况，但是您希望在其中居中的未知图像大小。

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

你提到可能需要把文本的图像上，所以我只是想这样做表现出它的快捷方式。这种方式将20px添加到顶部。如果你需要坚持180 x 180，那么你可以调整逻辑来适应。

来源

2012-07-22 02:01:11

居中动态大小的图像

回答

相关问题