无法在较小 div 的中心对齐大图像，溢出隐藏以及字幕效果答案

【问题标题】：Can't align large image in center of a smaller div with overflow hidden along with caption effect无法在较小 div 的中心对齐大图像，溢出隐藏以及字幕效果
【发布时间】：2012-07-05 04:27:48
【问题描述】：

我的问题分为三个部分

第 1 部分：显示图像的动画图像标题（这部分在示例第一行 http://jsfiddle.net/JBnbG/32/ 中完成）

第 2 部分：在 150x150 尺寸的 div 中显示 youtube hqdefault.jpg 缩略图的中心部分（这部分在示例中也作为第二行完成）

第 3 部分：我想将第 1 部分和第 2 部分的功能集成到第 3 部分中。问题是标题有效，但图像未在中心对齐，如示例第二行所示。

示例在http://jsfiddle.net/JBnbG/32/

我不能改变结构，否则它不会工作标题部分正常工作

如果有人能帮助解决保持 HTML 结构完整的问题，我将不胜感激

【问题讨论】：

标签： javascript jquery css youtube

【解决方案1】：

我想我的问题是，您是从 youtube 动态加载示例 html，还是仅加载图片？

如果 html 是您的，那么这是一个简单的样式调整。

我在jsfiddle 上叉了它，我想这就是你的意思。

不太确定样式发生了什么，但我设置了图像

id="ContentPlaceHolder1_rptVideos_imgVideo_1" style="height:auto; width:200px;margin-left:-25px;"

或者，另一种方式是：

left:-25px; position:relative;

顺便说一句，所有这些样式都应该在样式表中声明为一个类。

如果您要动态加载 html，我会注释掉实现相同功能的 javascript。

根据您正在使用的内容，如果使用 php，您可能希望获得一个能够自动裁剪为适当大小的脚本。 Timthumb.php 是最值得注意的一个，尽管存在一个永远不会完全防弹的安全问题，尽管它非常可靠。

干杯！

【讨论】：

谢谢，我已经给你的答案投票了，因为它只适用于一张图片。我实际上将 youtube 视频 ID 存储在数据库中，并从它们中动态地在 asp.net 中继器控件中创建视频图标。无论如何感谢您的回答
那么这是否意味着图像大小会改变每个实现？我只在我的 jsfiddle 中修复了一张图片来举例说明我的答案，但假设您可以根据需要为其他人修改它。如果高度也偏离中心，则对高度应用相同的概念，使用负边距来对齐它。在任何情况下，使元素居中的另一种方法是 margin-left:50%;left:-[1/2 图像的宽度。 ] 在这种情况下：左：-134.5px;

【解决方案2】：

检查此工作代码：http://jsfiddle.net/surendraVsingh/JBnbG/39/

要在 CSS 中完成的更改：

.VideoContainer  > span {
    display: block;    
}
.VideoContainer > span > img {
    display: inline-block;
    margin-left: -60px;
    margin-top: -25px;
}

【讨论】：

谢谢，我必须将您的答案标记为正确，因为它适用于所有图像