0

好的，我知道这已经被讨论到死了，人们得到了他们的问题的绿灯答案，但没有一个对我有用。

我想要做的是垂直居中的缩略图，它们是动态生成的或通过 AJAX 加载到具有固定大小的 div 中。在我的例子中是 200*200 像素。

请访问此站点：单击此处并单击例如“Web”按钮。您会看到所有缩略图都在其框的顶部或顶部。我真的尝试了我能想到的一切。我知道唯一可行的选择是将图像高度硬编码到每个缩略图标签中，但这将花费很长时间，因为我需要将它们的尺寸添加到数据库中。

如果您使用的是 Firebug，您可以轻松地编辑网站上的所有内容以运行测试，这就是我主要的做法。

我希望有人可以在这里帮助我。我真的很感激。非常感谢你。

4

5 回答 5

6

通常当我必须这样做时，我只是不使用<img>标签。相反，我将该图像放在带有background-position: 50% 50%. 例子：

HTML

<div class="onepic">
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')"></a>
</div>

CSS

.thickbox {
    display: block;
    width: 200px;
    height: 200px;
    background-position: 50% 50%;
}

当然，这可能对 SEO 不友好或不能优雅地降解（在没有 CSS 的情况下）。但是出于这个原因，您可以放置​​一个<img>标签并将其设置为display: none，如下所示：

HTML

<div class="onepic">
    <a href="http://www.dinomuhic.com/pic/web/Wigga.jpg" class="thickbox" style="background-image: url('http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg')">
        <img src="http://www.dinomuhic.com/pic/web/Wigga_thumb.jpg">
    </a>
</div>

CSS

.thickbox {
    display: block;
    width: 200px;
    height: 200px;
    background-position: 50% 50%;
}
.thickbox img {
    display: none;
}

你有它。一个无 JavaScript、对 SEO 友好的解决方案 :-)。希望你明白这个概念，如果我需要更多解释，请告诉我。

于 2010-02-17T21:56:31.557 回答
4

这行得通吗？

<div id="outer">
    <div id="inner">
         //image goes here
    </div>
</div>

#outer {
  display:table;
}
#inner {
  display:table-cell;
  vertical-align:middle;
}
于 2010-02-17T21:42:47.190 回答
0

不幸的是，我不知道一个简单的答案，因为 CSS 未能提供真正的垂直对齐结构。您有两个我知道的选项（并不意味着没有其他选项）：在 div.onepic 中使用 img 元素的绝对定位（参见http://phrogz.net/CSS/vertical-align/中的方法 1 index.html ) 或使用 javascript 计算缩略图 Y 高度并将每个 div.onepic 上的顶部填充设置为 img 和 div.onepic 的 Y 高度之间差异的一半。使用 jquery js 代码很容易做到。

于 2010-02-17T21:46:35.903 回答
0

另一种选择，虽然在语义上不正确或不以 CSS 为重点，但将其包装在表格/行中并垂直对齐。如果它是页面上的一个关闭，并且您知道屏幕阅读器可能存在可访问性问题，那么可能是您稍后可以解决的快速修复 - 取决于您的时间表......

于 2010-02-17T22:14:31.410 回答
0

这是很多代码，但就像一个魅力。在阅读了有关此主题的几篇文章后，我想出了它。它将各种尺寸的图像定位在固定宽度和高度的 div 中

你的 CSS 应该包含这个：

.friend_photo_cropped{
    overflow: hidden;
    height: 75px;
    width: 75px;
    position:relative;
}
.friend_photo_cropped img{
    position:relative;
}

你的代码应该是这样的：

<?php
list($width, $height) = getimagesize($yourImage);
if ($width>=$height)
{
        $h = '75';
        $w = round((75/$height)*$width);
}
else
{
        $w = '75';
        $h = round((75/$width)*$height);
}
$top = -round(($h-75)/2);
$left = -round(($w-75)/2);
echo '<td height="75">';
echo '<div class="friend_photo_cropped">';
        echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">';
echo '</div>';
echo '</td>';
?>
于 2012-10-21T13:38:17.587 回答