jQuery Mobile缩略图图像对齐

我已经阅读了有关该主题的其他问题，但它们从未真正得到解决。

我需要将listview的缩略图设置为居中。 那些缩略图具有最大高度，但我的一些图标小于最大高度。 将固定填充设置为缩略图不适用于不同的缩略图大小。

小图标：

更大的图标：

我的清单项目：

 
  >  
 
Folder
   > > 
 
Picture
   >  
 
Unknown
   
  

编辑：结果现在看起来：

我将此添加到ezankers解决方案中：

 .imgListThumb { max-width: 80px; max-heigth: 80px; } > 

Answer 1

你可以用一点CSS和绝对定位来做到这一点。 这是一个DEMO FIDDLE

在列表标记中，我已将图像放在具有类thumbContainer的容器DIV中：

 
 
  
  
 
Twitter
 
48x48 twitter icon
 
 
  
  
 
Facebook
 
24x24 facebook icon
 
 
  
  
 
iTunes
 
64x64 iTunes icon
 
  

CSS为LI文本添加左边距，为缩略图留出空间。 然后将容器绝对放在左边，宽度等于边距。 最后，图像居中。

 .has-odd-thumb .ui-link-inherit { margin-left: 90px !important; } .thumbContainer { position: absolute; left: 0; top: 0; bottom: 0; width: 90px; } .thumbContainer img { bottom: 0; left: 0;top: 0; right: 0; margin: auto; position: absolute; } 

您可以调整边距/宽度，使其适用于您的图像尺寸…