Question

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

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

请访问此网站：click here并点击“网络”按钮。你会看到所有的缩略图都在他们的盒子上面。我真的尝试了我能想到的一切。我知道的唯一选择是将图像高度硬编码到每个缩略图标签中，但这需要永远，因为我需要将它们的尺寸添加到数据库中。

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

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

Answer 1

通常当我必须这样做时，我只是不使用<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友好的解决方案:-)。希望你能得到这个概念，如果我需要解释的话，请告诉我。

Answer 2

这有用吗？

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

#outer {
  display:table;
}
#inner {
  display:table-cell;
  vertical-align:middle;
}

Answer 3

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

Answer 4

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

Answer 5

这是很多代码，但就像一个魅力。在阅读了关于这个主题的几篇文章后，我想出了它。它将各种尺寸的图像定位在固定宽度和高度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>';
?>

将图像缩略图垂直居中到固定大小的div中

5 个答案: